Typography in Web Design

October 8th, 2012 | Articles & Tutorials | Theme Author:

Typography is an important element of modern Web design and adhering to the right typographic conventions of current Web trends is a great way to design a unique and memorable website. In the early years of the Internet, the fonts that were displayed on a website were entirely controlled by the settings of the Web browser. Today, with CSS3 becoming a standard part of Web design, site builders have more power at their fingertips than ever before.

Serif versus Sans Serif

Serif fonts are those which have additional lines and decorations on them. They make for a more elegant and sophisticated look and are often used for decorative purposes. By contrast, sans serif fonts are those which have no extra details on them and instead represent the letters in a clearer manner.

Web designers should not be afraid of using both types of fonts. For page elements such as certain navigational features and titles, serif fonts often look better. For larger bodies of text, sans serif fonts are often better simply because they are easier to read. Since the main body of an article is usually in a smaller typeface than the title and various other page elements, sans serif fonts are much clearer. This is particularly the case for sites with dark backgrounds and colour schemes. For bodies of text, serif fonts can still look good if the text is larger and the line spacing is adequate.

Web-Safe Fonts

Web-safe fonts are fonts which can be found on most computers and other devices with Internet browsing enabled. These include Arial, Times New Roman, Courier, Georgia and Verdana and their cross-platform counterparts. Times New Roman has long been a popular choice for headings since it is a serif font with an elegant and sophisticated appearance. Arial, on the other hand, is one of the most popular fonts for bodies of text and remains the most commonly used font on the Internet.

The CSS2 specifications only allow for these Web-safe fonts and a few others. Sites designed using the CSS2 specification are also able to use other popular fonts such as Impact, Lucida or Tahoma, but not all Web-enabled devices have these fonts available on them. Because of this, it is recommended to specify some fall-back fonts in your website’s code.

Redefining Web Typography with CSS3

The newest CSS3 specification is rapidly taking on and is widely supported across a large range of browsers and Internet-enabled devices. CSS3 completely redefines the way that Web designers can use fonts on the Internet thanks to its powerful “@font-face” feature. The old alternative to using CSS3 in order to use non Web-safe fonts was to use images instead. However, this is bad for SEO, site speed and, for larger bodies of text, completely impractical.

CSS3 changes everything! Now you can simply upload any OpenType or TrueType font file to your website’s FTP server and add a few extra lines of code to your style sheets in order to display them on your site. For compatibility with mobile devices, it is also a good idea to convert your font to the SVG format and make this available in addition to the original TTF or OTF file.

If you don’t want to be restricted to Web-safe fonts but you also prefer to avoid CSS3 for the time being, font replacement tools such as Cufon are also popular. These tools can be integrated with your website allowing you to embed custom fonts.

Web Typography Mistakes to Avoid

If compatibility with as many devices and browsers as possible is your primary concern, then it is much safer to stick with standard Web-safe fonts such as those supported by the CSS2 specification.

A common mistake that amateur designers make is not using typography consistently throughout their website. Most sites define a certain theme and style and a good site maintains consistency throughout, making for a more memorable and pleasant browsing experience.

Another common mistake is using inappropriate colour schemes in typography. Keep in mind that most people prefer to read black text on a light background. White text on a black background is also popular, particularly with adequate line spacing and the avoidance of serif fonts in bodies of text.

Do not be tempted to use too many fonts on your website. In most cases, sticking to two fonts is optimal with one used for headings and another one used for bodies of text. Don’t forget that, if you have any advertising on your page or other elements which are out of your control, you will often already have other fonts displayed in those. Keeping two fonts consistently for your own content helps to keep it distinguished and stylish.

1 Comment
  1. With the CSS3, many web designers including myself are having a lot of fun experimenting with the font feature which for me is amazing.


  1. An Introduction to Typography in Web Design | inLine Media RSS Blog

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Get notified when we release new templates and other free goodies!