Most experienced web designers know that one should be careful what fonts they use. While any Mac or Windows designer will have hundreds - or more typically thousands - of fonts installed for various uses, designing web sites for the masses requires recognizing that the vast majority of those fonts won't be available on a very large number of their users' systems. Not only does a designer need to be concerned with what fonts they have which they only have because they purchased them, or they came with a high-end design program, but they also have to consider that users on various versions of Microsoft Windows, Apple Mac OSX, and GNU/Linux may have widely varying sets of fonts.

I'm going to cover this from two angles; First, font families which are generally safe to use on both Windows and OSX systems and second, a set of fairly universal CSS font stacks.

Some Definitions

Font Family

Refers to what folks will commonly understand to be a font 'name', such as Times New Roman, Garamond or Arial. This would be only part of the complete definition of a font, as size, weight and style will also count there.

Font Stack

Refers to the prioritized list of font families typically seen in CSS rules, which is meant to provide fallbacks to less-preferred fonts when the first family listed is not available.

Generic Font Family

Refers to a set of Font Families which do not map directly to any font family at all, but instead are recognized by all CSS compliant agents as meaning, "display a font which applies to this generic name". The generic font families should always be used as the last-resort item on a Font Stack, and the supported values are: serif, sans-serif, cursive, fantasy and monospace.

Safe Font Families

Because various versions of operating systems have historically included different font families by default, a list of 'safe' font families is a moving target. Further, due to the wide variety of packages which can be installed on Linux/*BSD systems, this list really only takes into account the two most recent versions of the two most popular desktop operating systems; Windows Vista and XP, and OSX 10.5 (Leopard) and 10.4 (Tiger). However, a large percentage of other systems will also have these font families:

• Andale Mono
• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Tahoma
• Times New Roman
• Trebuchet MS

A designer should still define a generic font family within the font stacks that use these font families. The sans-serif family applies to all of the above except for Andale Mono and Courier New (monospace); Georgia and Times New Roman (serif), and Comic Sans MS (fantasy or cursive). Note that the generic font families should never be expected to produce anything which will exactly match, of course, but instead simply provide a sane default for systems without your chosen font families installed. This can result in particularly unpredictable results with font families which would typically suggest the use of generic font families fantasy and cursive.

Safe Font Stacks

The list above should be very helpful in most cases. A web designer or developer could not go far wrong to use those families, plus their generic equivalents, for pretty much all of their CSS typography needs. However, you can broaden your list of options a bit further by using the CSS Font Stack a bit more ambitiously. This list adds some options where operating systems will have two different families by two different names which nevertheless have extremely similar appearance. The list below is what you can literally use as your font stack.

• Andale Mono, monospace
• Arial, Helvetica, sans-serif
• Arial Black, Gadget, sans-serif
• Courier New, Courier, monospace
• Comic Sans MS, fantasy (or cursive)
• Impact, Charcoal, sans-serif
• Georgia, serif
• Lucida Console, Monaco, monospace
• Lucida Sans Unicode, Lucida Grande, sans-serif
• Palatino Linotype, Book Antiqua, Palatino, serif
• Tahoma, Geneva, sans-serif
• Times New Roman, Times, serif
• Trebuchet MS, sans-serif
• Verdana, Geneva, sans-serif

Conclusion

As long as your text is flowing in paragraphs in a relatively flexible space, where pixel-perfect font reproduction is not critical, the above Safe Font Stacks will serve you very well for a while. For more exotic typographic needs, your best standards-compliant bet may be to use images, or simply to test yourself for what font stacks you should use. Of course, nothing beats testing in-person, how things look on various operating systems, and various browsers. Especially when you are carefully sizing your block elements based on the specifics of the fonts you are using, or expecting text to wrap in particular places, it's important to see how things might look. A good practice to get into is to remove all but the generic families and see how the page looks. If something that works perfectly in 99% of browsers is acceptable in the remaining 1%, then go for it!