2010-07-04

CSS font stacks

Continuing from my previous post about a CSS list of best monospaced fonts, I found this article by Michael Tuck coining the term "font stack". The CSS attribute 'font-family' lets you specify a long list of fonts. The web page uses the first font found. So go hog wild, and make a list, a "stack" of fonts in the typographic style your page deserves.

Always remember to include one of the CSS-defined fall-back styles. If none of the fonts you name can be found on the user's computer, each browser will use a default font assigned to ecah of these styles:
  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
 Here are my revisions to that author's font stacks. The idea here is to name fonts for various platforms. Please post comments with your ideas including suggestions for other platforms such as Solaris, BSD, etc.

Georgia Stack

font-family: Constantia, 'Droid Serif', Georgia, 'Minion Web Pro', 'Minion Web', Minion, 'Lucida Bright', Lucidabright, 'Lucida Serif', Lucida, 'DejaVu LGC Serif', 'DejaVu Serif', 'Bitstream Vera Serif', 'Liberation Serif', 'Nimbus Roman No9 L', 'Century Schoolbook L', Norasi, Rekha, serif;


Garamond Stack

font-family: 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', Garamond, 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Likhan, Norasi, Rekha, Georgia, 'DejaVu LGC Serif', 'DejaVu Serif', serif;


Times Stack

font-family: Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', Times, 'Times New Roman', serif;


Trebuchet Stack

font-family: 'Segoe UI', Candara, 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Verdana, 'Verdana Ref', sans-serif;


Verdana Stack

font-family: Corbel, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu LGC Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;


Helvetica Stack

font-family: Frutiger, 'Frutiger Linotype', Univers, Calibri, 'Gill Sans', 'Gill Sans MT', 'Myriad Web Pro', 'Myriad Web', 'Myriad Pro', Myriad, 'DejaVu LGC Sans Condensed', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, 'Helvetica Neue', Helvetica, Geneva,  Arial, sans-serif;


Impact Stack

font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', sans-serif;


Cursive Stack

font-family: Chalkboard, Casual, 'Comic Sans MS', TSCu_Comic, cursive;


Monospace Stack

font-family: Pragmata, Menlo, 'DejaVu LGC Sans Mono', 'DejaVu LGC Sans Mono', 'DejaVu Sans Mono', Consolas, 'Everson Mono', 'Lucida Console', 'Andale Mono', 'Nimbus Mono L', 'Liberation Mono', FreeMono, 'Lucida Sans Typewriter', 'Lucida Typewriter', 'Osaka Monospaced', "Bitstream Vera Sans Mono", Courier, 'New Courier', monospace;


Notes

The Droid font family was created for inclusion in the Android platform.

I tried to glean some additional Linux font names from this Linux Fonts Equivalents list, but several of those were for non-Latin languages. The "FreeXXX" fonts have many glyphs but may not be hinted; I'm not sure if these should be included or not. Please post your feedback if there are better Linux choices.

At least some implementations of Java (from Sun, Apple, and others) include a small set of "Lucida" family fonts. See a list in this documentation. Often these are available only to Java-based apps, not native apps. Note that the sans-serif (Lucida Sans) and monospaced (Lucida Typewriter) fonts lack a true italics version, while the serif font (Lucida Bright) has both bold and italics.

Obviously these stacks aim at web pages written in Latin-based languages. Hopefully folks share their stacks for other languages.

No comments:

Post a Comment