Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Voices That Matter

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Designing Accessible Text—Part 4: Typeface

Last updated Oct 17, 2003.

If you’re looking for more up-to-date information on this topic, please visit our Web Design article, podcast, and store pages.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

Of the attributes that influence the accessibility of Web text, typeface plays the smallest role—not quite a member of the chorus, but certainly a bit part. While color and size determine the possibility of reading, typeface influences the quality of the reading experience. For instance, some typefaces are more difficult to read than others, and a fantasy font like Impact or Desdemona is likely to lose its charm when used to set large blocks of text. While we might not enjoy reading under such conditions, it's unlikely that we would be unable to read due to such an unwise choice of typeface. Nevertheless, quality of experience does figure in to universal usability. Read on to explore the fine art of choosing typefaces in the constrained environment of the Web, and to learn best practices for coding typefaces that can be easily modified by users.

This article is the fourth and last in a series on Designing Accessible Text. Be sure to read the other articles for accessibility concerns regarding text size and color, and to learn the benefits of designing structured text.

Choosing a Typeface

Have you ever received a Word file from a colleague and opened it up to find the document cast into disarray, with tables, headings, and paragraphs all jumbled together, and the whole document displaying in Courier? Most likely, your colleague used his or her favorite typeface to design the document—perhaps Sand or Textile. And without that font on your system, you get Courier and chaos.

Web pages suffer a similar fate. Designers are at liberty to designate any typeface in their Web page designs, but since Web pages are designed to be shared—and shared broadly—their choice can have a wide-ranging affect. A Web page designed using a nonstandard typeface such as Goudy or Bembo could potentially break when viewed by users without that font on their system. The degree of damage depends on the extent to which the design depends on the availability of that particular font. It may be that the browser substitutes a font and the design remains intact—though not as the designer intended. On the other hand, font substitution could send the layout into disarray.

For a brief time, there was talk about embedded fonts that would allow designers to create pages using any typeface. The font, saved in a special format, would be sent to the user along with the page. Nice idea, but you just don't hear much talk of that these days.

The palette for Web typography, then, is limited to the set of fonts that is most broadly available on users' systems. Defining this set is complicated by the proliferation of devices accessing the Web. We're no longer talking about just Mac or Windows, but also Linux and Palm OS and Pocket PC—oh my! For the purposes of this article, we'll limit our inventory to the fonts that are commonly available on Windows and Macintosh computers (see Example 1 and Figure 1).

Figure 1

Figure 1: Common Windows and Macintosh fonts

Such a limited palette may feel confining, but think of what Degas accomplished with only four colors. In design, constraints improve the user experience by eliminating unnecessary complexity and variation. Everyday things—books, doorknobs, faucets—are more usable because of constraints. The challenge for Web designers is to use the Web’s limited palette of typefaces to create useful, usable, and attractive designs.

Note: You may be asking, why not create images of text? That way, you can use whatever typeface you like and be certain the user will see your text exactly as intended. While it's true that graphic text provides the greatest degree of design control, it knocks the legs right out from under universal usability. Text in an image cannot be read by software, cannot be resized, cannot be modified in any way, meaning some users will not have access to the information. In short, graphic text is not accessible text.

Onscreen Display

Yes, things are improving. Screens are getting more resolution and software developers are getting more clever at creating the illusion of resolution, but the fact remains—onscreen text lacks the resolution available in print—and this fact further limits your choice of typeface. In particular, the stem variations and serifs of a typeface such as Garamond, while lovely in print, do not carry through to the pixel grid of the screen. When designing for onscreen reading, better to choose a medium-weight typeface with a large x-height (the height of the lowercase characters) and wide counters (the white space inside characters), such as Georgia or Verdana (see Example 2 and Figure 2).

Figure 2

Figure 2: Paragraph from Alice's Adventures in Wonderland set in Garamond and Georgia, courtesy of Project Gutenberg

Coding Type

The days of the FONT tag are over. Today's tool for coding typefaces is CSS. And that's a good thing—CSS offers far more flexibility than FONT. Because CSS allows for fallbacks, you can take a chance and code pages using a less common typeface, such as Garamond or Tahoma, while providing a more common fallback, such as Georgia or Arial. As long as your design works using the fallback as well as the primary typeface, you're golden, and users who have the nonstandard font on their system will enjoy a sprinkling of typographic spice.

The following CSS example (Listing 1) sets the font size and typeface for paragraphs. The 1em measurement sets the text to the user default size. The 1.5em measurement sets the leading, or inter-line spacing, to one-and-one-half times the text size—overly generous, perhaps, but leading improves legibility and is particularly helpful for onscreen reading. For typeface, note that both "Palatino" and "Palatino Linotype" are specified since the Macintosh font file name is "Palatino" and the Windows font file name is "Palatino Linotype". Also note that quotes are used around multi-word fonts. And finally, the "serif" designation tells the browsers that, should Palatino, Palatino Linotype, or Georgia not be available, use the browser default serif font—most likely, Times New Roman (see Figure 3, Example 3).

Listing 1

p
{
         font: 1em/1.5em Palatino, "Palatino Linotype", Georgia, serif;
}

Figure 3

Figure 3: More Alice's Adventures in Wonderland, set in Palatino

The primary accessibility benefit of using CSS for styling text is that users who prefer to, or need to, view Web pages using a specific typeface can do so by applying a custom stylesheet. For example, low-vision users might find a sans-serif typeface such as Verdana easier to read. By applying a custom stylesheet specifying Verdana for all text (see Listing 2), pages that might otherwise be difficult to read are more accessible (see Figure 4).

Listing 2

body, div, h1, h2, h3, h4, h5, h6, ol, p, ul, li
{
     font-family: Verdana !important;
}

Figure 4

Figure 4: The original New York Times (top) and with a user stylesheet setting type to Verdana (bottom)

Resources

Robert Bringhurst, typographer extraordinaire, states, "Typography exists to honor content." For most Web pages, users interact more with textual content than with any other aspect of a design. Honor content by ensuring that your designs do not stand in the way of users wishing to access it.

For more on typography in general, Web typography, and universal usability, check out the following resources:

Save To Your Account