The New Font-Family

because the old list is totally outdated…

Shop for web design and development books here.

Guess what I did a while back? Okay—so you read the title! Purpose: To create a modern list of font-family settings for use in CSS, to make web pages render as closely as possible to the designer’s intent, on Windows, Mac, and Linux systems. Reason: The installed base of font-families has considerably changed in the last few years.

Web developers should be using what’s widely installed, not necessasarily what’s traditional, nor what’s available as an add-on. Most users are not going to search for, download, and install a legacy typeface just because some web site uses it—they’re going to see whatever their system substitutes and never know the difference. This is usually fine, until their substitution font fails to appear as the web designer intended. Also, the newer typefaces (Cambria, Colibri, Consolas, etc.) are simply better, being designed for the web and LCD monitors, and most of all they tend to rank high in various legibility and readability studies.

Notes:

  1. The new families were chosen in the following order of precedence:
    1. Installed base: Windows over 90%, Mac over 80%, Linux over 50%. In many cases, two Linux faces are provided, increasing the percentage. Installed base percentages were derived from codestyle.org’s survey of Aug. 11, 2007. (Current Survey)
    2. Alternatives for Windows, Mac, and Linux, where available.
    3. The (outdated) W3C-recommended generics: serif (e.g. Times), sans-serif (e.g. Helvetica), cursive (e.g. Zapf-Chancery), fantasy (e.g. Western), monospace (e.g. Courier).
    4. Rejected: MS-proprietaries, where no Mac or Linux equivalent is available.
    5. Note: Microsoft TrueType Core Fonts for Linux: RPMDEBSuse
  2. Comparisons drawn from various web sources, then adjusted by direct comparisons on KV5R’s XP-Pro/Debian system. Mac visuals were not available. Final choices were based more on line-length (typesetting) than on exact typeface match.
  3. New MS ClearType fonts Consolas, Constantia, Cambria, etc. added first, where applicable, because they are specifically designed to render well on web browsers and sub-pixel hinted LCD panels. These come with Vista, W7, and recent versions of MS-Office, and folks with LCD displays will appreciate them.
  4. Fallbacks:
    1. Verdana should NOT fall back to Arial—it sets much wider than Arial, and the installed base of Verdana/Geneva/VeraSans is now very high.
    2. Most other serif fonts should not fall back to Times-type fonts, because they set much wider than Times-types.
  5. No bitmap font names are used, but if user has none of the preceeding and user’s system uses the W3C generic, user may see a bitmap typeface, depending on user’s font alias settings.
  6. Please help make it better! Send any well-researched suggested updates.

The List

ARIAL:¹

font-family:Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;

ARIAL NARROW:

font-family:'Arial Narrow','Nimbus Sans L',sans-serif;

ARIAL BLACK:¹

font-family:'Arial Black',Gadget,sans-serif;

BOOKMAN: Easy-reading, wider and heavier than most serif fonts.

font-family:'Bookman Old Style',Bookman,'URW Bookman L','Palatino Linotype',serif;

CENTURY GOTHIC: Widely installed and should be used more in headings. 2013 update: No longer supplied with Windows. The closest replacement is to link to a Google font called Muli, then put it first in the stack.

font-family:'Muli','Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;

COMIC SANS MS:¹ People love it or hate it—there’s even a movement devoted to banning it. No Linux equivalent.

font-family:'Comic Sans MS',cursive;

CONSOLE: Monospace sans, brighter and easier-reading than Courier-types, sets at same width.

font-family:Consolas,'Lucida Console','DejaVu Sans Mono',monospace;

COURIER:¹ Monospace typewriter; Consolas looks better than Courier at smaller sizes.

font-family:'Courier New',Courier,'Nimbus Mono L',monospace;

GEORGIA:¹ Pretty for titles and headings but has annoying descended numerals.

font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif;

HELVETICA: Primarily a Mac font; should fall back to Arial to cover Windows machines.

font-family:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif

IMPACT:¹ MS proprietary. Risky on non-win systems.

font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

LUCIDA SANS:

font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;

PALATINO:

font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif;

SYMBOL: Greek & Math. Use where needed. Widely supported.

font-family:symbol,'Standard Symbols L';

TAHOMA: Note: Has no italic face.

font-family:'Tahoma',sans-serif;

TIMES NEW ROMAN:¹ Sets tighter than other serif fonts.

font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;

TREBUCHET:¹

font-family:'Trebuchet MS',sans-serif;

VERDANA:¹ The best body font on the web—best at 16px high. Do not fall-back to Arial nor Helvetica: Verdana sets much wider.

font-family:Verdana,Geneva,'DejaVu Sans',sans-serif;

WEBDINGS:¹ MS proprietary.

font-family:Webdings,fantasy;

WINGDINGS: MS proprietary. No Linux equiv.

font-family:Wingdings,fantasy;

ZAPF CHANCERY:

font-family:'Monotype Corsiva','Apple Chancery','ITC Zapf Chancery','URW Chancery L',cursive;

ZAPF DINGBATS: Rarely used now—should not be used on web.

font-family:'Monotype Sorts',dingbats,'ITC Zapf Dingbats',fantasy;

1: These are available for Linux in the msttcorefonts package.

 

Here’s the whole KV5R list—copy and make yourself a handy text file for reference.

font-family:Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif;
font-family:'Arial Narrow','Nimbus Sans L',sans-serif;
font-family:'Arial Black',Gadget,sans-serif;
font-family:'Bookman Old Style',Bookman,'URW Bookman L','Palatino Linotype',serif;
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;
font-family:'Comic Sans MS',cursive;
font-family:Consolas,'Lucida Console','DejaVu Sans Mono',monospace;
font-family:'Courier New',Courier,'Nimbus Mono L',monospace;
font-family:Constantia,Georgia,'Nimbus Roman No9 L',serif;
font-family:Helvetica,Arial,'DejaVu Sans','Liberation Sans',Freesans,sans-serif
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
font-family:Cambria,'Palatino Linotype','Book Antiqua','URW Palladio L',serif;
font-family:symbol,'Standard Symbols L';
font-family:'Tahoma',sans-serif;
font-family:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
font-family:'Trebuchet MS',sans-serif;
font-family:Verdana,Geneva,'DejaVu Sans',sans-serif;
font-family:Webdings,fantasy;
font-family:Wingdings,fantasy;
font-family:'Monotype Corsiva','Apple Chancery','ITC Zapf Chancery','URW Chancery L',cursive;
font-family:'Monotype Sorts',dingbats,'ITC Zapf Dingbats',fantasy;

For comparison, here’s the old “web safe” list, which now isn’t:

Web-safe fonts (from fonttester.com):
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif; /* bitmap */
font-family: 'MS Serif', 'New York', serif; /* bitmap */
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;

The trouble with using the old list is that

  • some of those fonts are no longer in common usage, and are not widely installed;
  • it completely ignores Linux users;
  • better fonts are now available for modern computer displays.

My Favorite Web Fonts

  • Titles and headings: Century Gothic or Constantia/Georgia
  • Body (sans): Verdana, at 16px with 1.5em line-height
  • Body (serif): Bookman, at 16px with 1.5em line-height
  • Mono: Consolas/Lucida Console

At this point in web history, you just can’t beat’em!

Links

Leave a Reply

Your email address will not be published. Required fields are marked *