Fonts were not designed to mix and match. Sure, we can consult the Font Matrix and find an available font. But, tailored web safe typography has always been seen as a luxury. With the proliferation of desktop publishing software, computers are now preloaded with more system fonts than ever before. With greater choice comes greater control.

Where are we now?

There have been some great articles written about CSS font stacks. Designer’s know Gill Sans, Myriad, 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 system fonts to have font styling the way you want it, without compromise. Below you’ll find a list of font stacks organized by the most popular typeface classifications.

Headline Font Stacks

1   Display Serifs (Delicate details. Best seen at large sizes)

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

2   Geometric (Low readability. Best seen large in short lines)

CAUTION: At best, 90-95% coverage over all systems. Drop back to Arial to prevent generics.

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

3   Modern (High contrast. Thins may disappear at smaller sizes)

WARNING: At best, 70-80% coverage over all systems. Drop back to Transitionals (Georgia, Times, Times New Roman) to prevent 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 Rockwell (50% on windows), there’s very little coverage. If you’d like to use them one, try one of the many font replacement techniques.

All stacks below guarantee best possible coverage (99%). This is an attempt to retain the same font styling on the most systems.

Sans- Serif Paragraph Font Stacks

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

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

5   Humanist (Slightly more varied strokes. Some serif features)

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

6   Set Small (Crystal 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 Paragraph Font Stacks

7   Old Style (Unique historic character, often overlooked)

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

8   Transitional (The workhorses of the serif. Easy on the eyes. )

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

Monospace Font Stacks

9    Clear Code (The best monospaced 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 ♥ typewriters (Need I say more?)

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