Common Web Fonts Demystified

Choosing a typeface is the starting point of typographic design, and may even go on to inform the overall design or feel of a page. Traditionally, Web typography suffers from a lack of options when it comes to typeface choice simply because fonts can be displayed only if they’re available on users’ computers. The first job of the Web typographer, then, is to distinguish the fonts that are readily available, and to understand which are best suited to his or her particular tasks.

Very generally speaking, there are two main groups of typefaces that are used on the Web: serif and sans-serif. The difference is easily demonstrated in this image:

1502_serifsansserif
Serif and sans-serif type

Serifs are the extra lines or small decorations added to the ends of the main strokes of the Georgia typeface above. The theory behind these serifs is that they help the letters flow, and lead the eye across the text during reading. Serif fonts are very popular in print, and although there is a certain amount of debate regarding which family of typeface is most legible on the screen, I fall firmly in to the camp that believes that sans-serif faces are a more suitable option.

The variable boldness and fine extra strokes of the serif fonts, particularly at smaller sizes of body text, often appear pixilated and untidy. This is still the case even with the most modern anti-aliasing techniques. With anti-aliasing enabled, the serif fonts look blurred (which is exactly what they are) around their curves and terminals. On the other hand, the straight, low contrast, open strokes of a sans-serif font, such as Verdana, will always leave a good impression on-screen.

The Common Web Fonts

Most designers are probably familiar with what could be considered the common Web fonts. The following CSS rule probably won’t raise too many eyebrows.

body {
font-family: verdana, "trebuchet MS", helvetica, sans-serif;
}

Here, we have three classic fonts that are used all over the Web. However, instead of just copying and pasting this rule, let’s look at why we have made the decision to use those three fonts, and what characterizes them as suitable for our purposes.

Verdana is our first choice font here. This font was designed for the screen and is the most common sans-serif typeface used on the Web today.

1502_verdana
The Verdana face in detail

Note the generous amount of space between each character, as well as the amount of whitespace within the characters (glyphs) themselves. This is what makes Verdana so legible on screen, and an excellent choice for a sans-serif on the Web.

Trebuchet is another face created for the screen. Designed in 1996 by Vincent Connare, it is probably the most distinctive of the common Web fonts, and can convey a great deal of energy and personality. Certain features of this typeface depart significantly from what we would expect from a classic grotesk font, for example, the uppercase M seen below.

1502_trebuchet
The Trebuchet face in detail

Despite its distinct personality, Trebuchet’s strokes are blocky and clear. It has a large x-height, helping to increase legibility at smaller sizes.

Finally, we’ve gone for Helvetica. Helvetica, designed in the 1950s and hugely popular throughout the second half of the 20th Century, is a classic in its own right. That it transfers so well to screen is both a testament to its legibility and a blessing for Web typographers.

1502_helvetica
The Helvetica face in detail

Despite its compact width, Helvetica reads well on screen due to its large x-height. It has a consistent and uniform feel to it, which not only makes it economical with space, but also means it’s easy on the eye.

Finally our CSS rule declares sans-serif as a generic font family. This ensures that users’ systems will at least default to a sans-serif font if they do not have any of the others we have specified.

If you use the rule above, you’ll be certain to provide good, legible text to the vast majority of your users. However, why not experiment a bit more? What are some of the other good screen fonts out there that we can provide to users who have them available?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twitter.com/accessibleweb Dick Morton

    I wouldn’t describe Helvetica as a common web font (common on Macs but not across the whole spectrum of web users) but of course it is fine to include it in a font stack. However, putting a compact font like Helvetica in the same stack as a wide font like Verdana creates its own difficulties with trying to get some consistency in layout across different configurations.

    • Patty

      Helvetica is the most common font ever created. There are movies about it.

  • Dave

    Is there anyway I can embed a font into my webdesign to eliminate the randomness of the potential ‘serif’ fonts that may be used by a visitor and his or her browser? Why can’t I just pick a font or two (or buy them), and send them along with my webpage?

    Sorry if this is a rookie question, but hey, I’m a rookie and I need to know.

    Thanks.

  • http://www.grafixnetz.de mark coles

    Greetings,

    I wonder why you don’t discuss your own choice of font for this website.
    font-family: “Lucida Grande”,”Lucida Sans Unicode”,Sans-serif;

    It is crisp and clear and looks good here nad on Opera Mobil emulator.

    Thanks