Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Working with Fonts and CSS
Pages: 1, 2

Generic Families

There may be times when the lists you have seen so far are not enough. What happens if a browser doesn't have access to any of the fonts listed? It will fall back on its default font, unless the author provides a generic family name to provide additional fallback. For example:



h1, h2, h3, h4, h5, h6 {font-family:  Helvetica, 
  Arial, Geneva, sans-serif;}

This final entry directs the browser to use any available Sans-serif font if it cannot find a match for the listed fonts.

Cascading Style Sheets: The Definitive GuideCascading Style Sheets: The Definitive Guide
By Eric A. Meyer
May 2000
1-56592-622-6, Order Number: 6226
467 pages, $34.95

There are five generic font families, although two of them are not particularly useful. These families are:

  • Serif: fonts such as Times, New Century Schoolbook, and Garamond. The letters in a Serif font feature small caps, lines, and other decorations -- the serifs which give this family its name.

  • Sans-serif: fonts such as Geneva, Helvetica, and Arial. The letters of Sans-serif fonts have no serifs.

  • Monospace: fonts where each character is the same width. This is in contrast to the vast majority of fonts, which are proportional -- that is, the amount of horizontal space taken up by each letter is in proportion to its width, so that i is not as wide as w. Courier is the most commonly used monospace font. Note that monospace fonts can also be either Serif or Sans-serif. Courier is a Serif font, for example.

  • Cursive: fonts which emulate human handwriting, such as Author. Cursive fonts are typically quite difficult to read on-screen, and their use is generally discouraged. Some browsers cannot even find and use cursive fonts.

  • Fantasy: fonts which do not fit into the previous four families, such as Zapf Dingbats, Ventilate, or Klingon. Because this is a catch-all category, it is defined more by what it is not (the other four font families) than what it is.

It is possible to provide a generic family which does not match the specific fonts listed, but this is not recommended.

It is also possible to simply declare a generic font family without any specific font names. For example:

h1, h2, h3, h4, h5, h6 {font-family:  sans-serif;}

Cross-Platform Fonts

In a world with many different operating systems, it is important to know what fonts are widely available across platforms, and what close alternatives exist. Although you may like the look of Sand, and you know it's installed on most modern Macs, its non-existence on Windows machines means that your page will turn out looking very different on various machines.

For a basic guide, please consult the following table. Note that the entry for Fantasy fonts is fairly suspect, since the catch-all nature of this font family means that the lack of a specific font could cause another, wildly different font to be substituted.

Generic FamilyCommon Macintosh FontsCommon Windows Fonts
Serif Times, New Century Schoolbook, Palatino Times New Roman, Georgia
Sans-serif Helvetica, Arial, Verdana* Arial, Tahoma, Verdana*
Monospace Courier Courier New
Cursive -- --
Fantasy WingDings, Symbol WingDings, Symbol

* installed by Internet Explorer (some systems may not have this browser)

As an example, consider a page where the default font is a Serif font, and headings should be in a Sans-serif font. One possible choice is:

BODY {font-family: "Times New Roman", Times, 
  "New Century Schoolbook", serif;}
H1, H2, H3, H4, H5, H6 {font-family: Arial, Helvetica,
  Verdana: sans-serif;}

For the BODY, the font Times New Roman was placed first so that it is the first font checked for. In a case where it has been installed on a Macintosh, it will be used there, as it will on practically every Windows system in the world. If a machine does not have this font, then the browser will go to the next one, Times, and so on. If none of the three fonts listed is available, then the browser will fall back to whatever Serif font it can find. Similar reasoning is used for the construction of the styles for headings.

Additional Information

Eric A. Meyer is a member of the CSS&FP Working Group and the author of Cascading Style Sheets: The Definitive Guide.


Return to the JavaScript and CSS DevCenter.