10 Definitive Web Font Stacks for Designers

Fonts were not designed to mix and match. Sure, we can con­sult the Font Matrix and find an avail­able font. But, tai­lored web safe typog­ra­phy has always been seen as a luxury. With the pro­lif­er­a­tion of desk­top pub­lish­ing soft­ware, com­put­ers are now pre­loaded with more sys­tem fonts than ever before. With greater choice comes greater control.

Where are we now?

There have been some great arti­cles writ­ten about CSS font stacks. Designer’s know Gill Sans, Myr­iad, Tahoma, and Frutiger are not “Arial-based”. But, we live with it. We think that’s the best we can get. After doing some research, I’ve found there’s more than enough sys­tem fonts to have font styling the way you want it, with­out com­pro­mise. Below you’ll find a list of font stacks orga­nized by the most pop­u­lar type­face classifications.

Head­line Font Stacks

1   Dis­play Ser­ifs (Del­i­cate details. Best seen at large sizes)

font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;

2   Geo­met­ric (Low read­abil­ity. Best seen large in short lines)

CAUTION: At best, 90–95% cov­er­age over all systems. Drop back to Arial to pre­vent generics.

font-family: "Century Gothic", "Tw Cen MT", Futura, "URW Gothic L", Arial, sans-serif;

3   Mod­ern (High con­trast. Thins may dis­ap­pear at smaller sizes)

WARNING: At best, 70–80% cov­er­age over all sys­tems. Drop back to Tran­si­tion­als (Geor­gia, Times, Times New Roman) to pre­vent generics.

font-family: Didot,"Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;

You may ask, “Where’s the slab serif stack?”. Besides Rock­well (50% on win­dows), there’s very lit­tle cov­er­age. If you’d like to use them one, try one of the many font replace­ment tech­niques.

All stacks below guar­an­tee best pos­si­ble cov­er­age (99%). This is an attempt to retain the same font styling on the most systems.

Sans– Serif Para­graph Font Stacks

4   Neo-Grotesque  (The grand­daddy of sans serif. Even strokes, well balanced)

font-family: Corbel, Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", sans-serif;

5   Human­ist (Slightly more var­ied strokes. Some serif features)

font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;

6   Set Small (Crys­tal clear at x-small. Looks great less than 11 pts)

font-family: Corbel, "Lucida Sans Unicode", "Lucida Grade", "Bitstream Vera Sans", "Luxi Serif", Verdana, sans-serif;

Serif Para­graph Font Stacks

7   Old Style (Unique his­toric char­ac­ter, often overlooked)

font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;

8   Tran­si­tional (The work­horses of the serif. Easy on the eyes. )

font-family: Cambria, Georgia, "New Century Schoolbook", "Century Schoolbook L", "Times New Roman", serif;

Mono­space Font Stacks

9    Clear Code (The best mono­spaced fonts. Easy on a developer’s weary eyes)

font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;

10   I ♥ type­writ­ers (Need I say more?)

font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;