Effective Use of Fonts

Using style sheets effectively partly depends on general issues of good web design. What's particularly important is that you remember that effective pages have to work any systems your users have, and that is a very different matter than what works well on your (no doubt up-to-date and fine-tuned system). Let's look at some of these issues here in terms of writing good style sheets.

Fonts

You will have noticed that in each of my examples where a font-family was specified, I included multiple values. The reason is that only those fonts that are installed on a user's machine can be displayed, and you can't count on all users having the same fonts. There will, of course, always be a default that the browser can fall back on, but if you're after a particular font, it's worth making some effort to make sure that what the user sees is as close to what you want as possible.

First, then, you need to realize that you can specify, as a last resort, a general font family as well as specific fonts. The allowable font families are:

• serif
• san-serif
• (cursive) not supported by IE3.x
• (fantasy) not supported by IE3.x
• monospaced

One of these should probably always be the last option for your font-family value. Monospaced fonts use space inefficiently, are not particularly easy to read, and therefore should be used sparingly, for special effects or for code samples, for instance. Fantasy fonts are generally special symbols that vary wildly from set to set, and therefore are generally useful only for decoration (though the symbols can be very useful provided you know that your users have the same fonts). Cursive fonts are generally less readable than print fonts, and should also be used sparingly. That leaves serif and sans-serif as the general purpose families. Some studies have suggested that sans-serif fonts can generally be read slightly faster than serif fonts, and with fewer errors, but the differences are so slight that choice is really an aesthetic one.

The next step is to think about what fonts are likely to be installed on most machines. For Windows users, Arial, Courier, and Times New Roman are safe bets, but Times New Roman is what most browsers default to anyway. In addition, the installation of Internet Explorer also installs the following fonts during the browser installation:

• Arial (Bold Italic)
• Arial Black
• Comic Sans MS
• Comic Sans MS (Bold)
• Verdana
• Verdana (Italic)
• Verdana (Bold)
• Verdana (Bold Italic)

(Thanks to Jim Tom Polk for supplying this list.)

Microsoft has made several other fonts "for the Web" such as Trebuchet MS and Georgia available in their Site Builders Workshop Gallery, and I assume that these will become part of the standard installation package for future releases. Beyond that, fonts may vary considerably according to what software users have installed, so nothing more than general font families can be depended on. For non-Windows users, you cannot depend on anything beyond general font families.

The new @font-face property (when implemented), or Netscape's alternative, provides a means for making your chosen font available to users who don't have it installed. Two cautions, though: 1) the font should work across platforms, as Microsoft is attempting to insure; 2) users may not appreciate having a dozen new fonts installed on their systems, and using a dozen different fonts is not a good idea anyway (see the following paragraph).

One final caution on fonts: like the first industrial-strength word processors, style sheets may tempt you to use different font specifications for every element, simply because it is so easy to do. That is not a good idea from the standpoint of readability and effective communication; frequent font variations slow down reading and increase the likelihood of misreading. Confine yourself to two or three fonts, at most, per page, and don't switch fonts from page to page, unless there's a good reason. Subtle changes in font size and, to a lesser extent, text and background color are better ways to distinguish different types and levels of information.