The New CSS Font-Family List

Because the old list is outdated.

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. The old arial, helvetica, sans-serif and Times New Roman, Times, serif typeface listings used in most CSS are no longer valid.

Web developers should be using what’s widely installed, not necessasarily what’s traditional, nor what’s available as an add-on. Must 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: MS TT Core fonts for Linux: RPM — DEB — Suse
  2. Comparisons drawn from various web sources, then adjusted by direct comparisons on KV5R’s XP-Pro/Debian system. Mac visuals not available. Final choices were based more on line-length (typesetting) than on exact typeface match.
  3. New MS ClearType fonts Consolas, Constantina, 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 and recent versions of MS-Office, and folks with LCDs will appreciate them.
  4. Fallbacks: The traditional fallback fonts are outdated.
    1. Nothing should fall back to Helvetica, because the installed base is now very low and we can all safely forget Helvetica.
    2. 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.
    3. 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:¹ There is no need to fall back to helvetica.

font-family:Arial,Helmet,Freesans,sans-serif;

ARIAL NARROW: Not widely installed—should not be used on web.

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',serif;

CENTURY GOTHIC: Widely installed and should be used more in headings.

font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;

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

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

COURIER NEW:¹ (monospace typewriter) Consolas looks better than Courier at smaller sizes.

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

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

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

HELVETICA: Forget it—installed base of Arial is much higher in all systems.

font-family:Helvetica,Arial,Helmet,Freesans,sans-serif;

IMPACT:¹ MS proprietary.

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

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

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: MS proprietary. Has no italic face.

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

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

TREBUCHET:¹ MS proprietary.

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,'Bitstream Vera Sans','DejaVu Sans',sans-serif;

WEBDINGS:¹ MS proprietary.

font-family:Webdings,fantasy;

WINGDINGS: MS proprietary. No Linux equiv.

font-family:Wingdings,fantasy;

ZAPF CHANCERY: Corsiva no longer comes with Windows. Rare.

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;
¹These are available in the msttcorefonts package.

 

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

font-family:Arial,Helmet,Freesans,sans-serif;
font-family:'Arial Narrow','Nimbus Sans L',sans-serif;
font-family:'Bookman Old Style',Bookman,'URW Bookman L',serif;
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
font-family:'Comic Sans MS',cursive;
font-family:'Courier New',Courier,Freemono,'Nimbus Mono L',monospace;
font-family:Constantina,Georgia,'Nimbus Roman No9 L',serif;
font-family:Consolas,'Lucida Console','Bitstream VeraSans Mono','DejaVu Sans Mono',monospace;
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:Cambria,'Times New Roman','Nimbus Roman No9 L','Freeserif',Times,serif;
font-family:Verdana,Geneva,'Bitstream Vera Sans','DejaVu Sans',sans-serif;

For comparison, here’s the old list, still commonly being used:

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

My Favorite Web Fonts

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

Links

KV5R Logo  Valid HTML 4 Strict  Valid CSS  WCAG 1 conformance  Handmade with Note Tab Pro