8 Definitive Web Font Stacks Article

A more traditional Garamond-based serif 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", Georgia, serif; The Helvetica/Arial-based sans serif stack: font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; The Verdana-based sans serif stack: font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; The Trebuchet-based sans serif stack: font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; The heavier “Impact” sans serif stack: font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; The monospace stack: font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; “A good rule of thumb is that the closer to one another are the font sizes of the various levels, the more elegant the overall impression will be. If you’re after a disjointed or modern feel, try using font sizes that are further apart on the scale.” – Andy Hume

Rationale behind the Stacks

It’s true that there are an unusually large number of fonts in most of the stacks, but there’s a reason for this: there’ll be a huge disparity of what people are likely to have on their machines. It’s better to use a more common font as an approximation than going back to the generic, fallback serif or sans serif choice. There are also a lot of Linux fonts towards the bottom of most of the stacks, mostly because different flavors of Linux provide different fonts for their users. A lot of fonts undergo name changes over the different operating systems, which is why I’ve listed them all; for example, Palatino, Palatino Linotype, Palladio, URW Palladio L, and Book Antiqua are all (more or less) the same font. Additionally, some thought has been put into which variants have a larger Unicode character family, and which then precede its cousin in its stack (kudos to my friend, Tommy Olsson for reminding me of this important font element). As noted above, the general ordering is: the less widespread Windows fonts, then Mac fonts, then Linux varieties, then universal fonts, and finally, the generic family name. This is why the more well-known fonts (Arial, Verdana, Georgia) bring up the rear – they are as close to universal as you can have. Certainly you’ll want to reorder these stacks to suit the needs of your site and its regular users. Of course, your font stacks will be largely determined by what you’re actually styling. What works beautifully for a header might well strike out as body text. Yes, it’s obvious, but how many sites have we visited (or be honest, created) that violated this caveat? I once designed a site for a high school mythology class that used an ancient Greek typographical font (the name of which escapes me now). I thought that since the Greek typography looked so good in the headers, it would also complement the body text. That decision lasted all of thirty seconds. As I remember, the body text ended up presented in Verdana – a much more readable choice.

Frequently Asked Questions about Definitive Font Stacks