CSS font stacks

Published: 24 April 2010

Font stacks are about creating a relevant and comprehensive list of fall-back fonts - based on aspect ratio, platforms, operating systems etc.

What's a bad example of a CSS font stack?

body {
  font-family: Verdana, Arial, sans-serif;
}

What’s wrong here?

• Problem 1: There are a limited number of fallback fonts.
• Problem 2: The fonts used may not be available for all operating systems (eg. Windows, Mac, Linux).
• Problem 3: The fonts used have different “aspect ratios”

What is aspect ratio?

Some fonts, especially those specifically designed for screen, may appear wider and/or taller than other fonts.

An example would be the difference between Verdana and Helvetica. Verdana has a larger x-height and overall size. This means that these fonts have a larger aspect ratio.

If you use font’s with different aspect ratio, some people may see your pages with a much smaller font size than others -depending on their available fonts.

body {
  font-family: Verdana, Arial, sans-serif;
}

Ideally, your font stacks should include a range of fonts that have a similar aspect ratio.

The basic font stacks based on aspect ratio

• Wide sans-serif eg: Verdana, Geneva
• Narrow sans-serif eg: Tahoma, Arial, Hevetica
• Wide serif eg: Georgia, Utopia
• Narrow serif eg: Times, Times New Roman
• Monospace eg: Consolas, Courier, Courier New

Some steps to creating a good font stack

1. Pick the font you like:
eg. Helvetica Neue

2. Determine which aspect ratio category it belongs to:
eg. Narrow sans-serif

3. Choose a preferred Linux variation and a highly available variation
eg. DejaVu Sans - 90.76% availability on Linux

4. Choose a preferred Macintosh variation and highly available variation
eg. Helvetica Neue - 95.11% availability on Mac

5. Choose a preferred Windows variation and a highly available variation
eg. Arial - 99.32% availability on Win

6. Include the generic font family
eg. sans-serif

7. Make sure fonts with white-space in names are wrapped in single or double quotes.
(eg. “Microsoft Sans-serif”)

A better font stack?

body {
font-family:
  "DejaVu Sans",
  "URW Gothic L",
  "Helvetica Neue”,
  Helvetica,
  Arial,
  "Microsoft Sans Serif",
  sans-serif;
}

Some example font stacks?

The Helvetica-based sans serif stack:

‘Helvetica Neue’, Helvetica, Frutiger, ‘Frutiger Linotype’, Univers, Calibri, ‘Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, Myriad, ‘DejaVu Sans Condensed’, ‘Liberation Sans’, Tahoma, Geneva, ‘Helvetica Neue’, Helvetica, Arial, sans-serif

Corbel, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘DejaVu Sans’, ‘Bitstream Vera Sans’, ‘Liberation Sans’, Verdana, ‘Verdana Ref’, sans-serif

A Times-based serif stack:

Cambria, ‘Hoefler Text’, Utopia, ‘Liberation Serif’, Times, ‘Times New Roman’, serif

A Garamond-based serif stack:

Palatino, Palladio, ‘URW Palladio L’, ‘Book Antiqua’, Baskerville, Garamond, ‘Apple Garamond’, ‘New Century Schoolbook’, Georgia, serif

The Monospace stack:

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