Choosing Fonts

All fonts are not created equal. When choosing a font for your Web site, make sure to opt for those that are available on your customers' computers and browsers. Otherwise their systems might use a default typeface that's not optimized for online viewing and the site will not appear as you intended.

Since you can't know what system each viewer has, you should create a flexible design and still maintain some control over your Web pages' appearance. Always supply a list of font alternatives, in order of preference.

The two most common font families are serif and sans serif. Serif fonts have cross-lines at the tips of each letter or other embellishments, and fine variations. Sans serif fonts are plain and don't have the decorative embellishments. They vary between thick and thin strokes, compared to fonts from the serif family. Because serifs rely on fine detail, they work well for the high-quality typography of books and magazines. In fact, readability studies have found that most people read serif text faster than sans serif text in print. Sadly, computer screens don't offer the typographical quality of print, so the fine details in the serifs end up not looking so fine after all. As a result, studies of onscreen reading find that sans serif text is the fastest to read, exactly the opposite of the finding for print.

This table outlines the fonts that come preinstalled on most browsers. It's wise not to stray from this list.

Common Fonts and Their Families

Font Name

Generic Font Family

Sans serif

Sans serif


Mono Space


Sans serif


Sans serif

Sans serif

When in Doubt, Use Verdana

Even with current technology, screen resolution is much lower than print resolution. Fonts that are ornate or detailed might look fine in print but don't render clearly on the screen, resulting in jagged and degraded text formations.

Using typefaces that are not intended for online reading can be detrimental to your Web site, especially at smaller sizes. Typefaces that are optimized for online viewing tend to be unadorned and crisp, making them easier to read on screens. This table describes the characteristics of the most common fonts.

Characteristics of Common Fonts

Font Name

Online Readability


Readable at reasonable sizes. Good at font points 10 or above.

Modern, clean basic, no-frills. Generally liked by people of all ages.

Fancy lettering makes it difficult to read online, even at large sizes.

Friendly, youthful, fun, and informal. Not appropriate for more serious or professional Web sites.

The best serif font designed for online reading. Generally good at font sizes 10 and above.

Traditional-looking, but more modern-looking and readable than Times New Roman. Good online serif alternative.

Generally used for print. Not recommended for online viewing. Poor readability even at large sizes.

Bold. Not suitable for blocks of content. Can be used sparingly for short headlines.

Good for printed materials. Onscreen, readability quickly diminishes at small point sizes. Only good at font sizes 12 or higher.

Traditional-looking. Not recommended if you want to appear professional. Generally not preferred by audiences of any age.

Readable at reasonable sizes. Good at font points 10 or above.

Modern, simple, edgy.

The most readable online font, even in small type.

Modern, simple, professional. The recommended font for use in body text, where readability is critical. High in user preference.

Both the serif and sans-serif families have a font that is designed for online reading: Georgia and Verdana, respectively. In general, sans-serif fonts appear more modern than serifs and are more legible at very small sizes. If you're not sure which to use, it's safer to go with Verdana. This sans-serif font is common on all computer systems, works especially well at smaller sizes, and is most pleasant to read on screens. If you're inclined to use a serif typface, Georgia is a good alternative because it also works well for online viewing, although many people prefer Verdanaespecially younger users, who seem to feel that Georgia doesn't match their sense of style. But remember that serif fonts are slightly worse than sans serifs for on-screen reading, so only use Georgia (or other serif typefaces) if your style or banding absolutely requires it.

When Will Screens Read as Well as Print?

Current computer monitors typically display around 80 to 100 dots per inch (dpi) while paper can display from 600 dpi for a laser printer to 3000 dpi for a glossy magazine. The dpi rating translates directly into crispness of characters. Because of their drastically lower resolutions, computer monitors are inherently fuzzy, which is the main reason to avoid serif typefaces.

Screens have already gotten somewhat better since the 72-dpi resolution found on the first Macintosh in 1984. But they haven't improved as fast as other PC components. An average PC computes at a speed that's about 16,000 times faster than the first Mac and has about 8,000 times more memory. But the average computer screen is only about four times bigger than the Mac screen in 1984 and doesn't even come close to having twice its dpi.

By 2025 we should finally get decent computer screens that approximate the typographic quality of paper. Specialized applications are probably going to get good screens earlier than that. Once computer monitors get to be as good as paper, it's likely that the usability recommendations for online typography will change, and we will recommend the same guidelines as those developed for print long ago, including a change to serifs as the preferred fonts.

Prioritizing Web Usability
Prioritizing Web Usability
ISBN: 0321350316
EAN: 2147483647
Year: 2006
Pages: 107

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: