1. Technology

Font Stacks

How to Choose a Workable CSS Font Stack


What is a Font Stack?

When you write CSS font families, you should write a list of fonts that the browser can use, in order of preference. This way, if your first choice of font is not available, perhaps your second choice is, and so on through your list. By choosing a good list of fonts, you can be sure that your Web pages will look close to how you intended them to look. If you don't choose the font, and the one you want isn't available, the browser will choose for you, and that is never pretty.

How Many Fonts in a Font Stack?

I usually have 4 to 6 fonts in my font stacks. I order them this way:

  1. Preferred font - this is the font that I've determined is the best for this location or type of text. If the browser has access to this font, the page will look exactly as I designed it.
  2. OS alternative - Some of my preferred fonts are not found on Windows or Macintosh. So the second font in my stack is my preference for people browsing on the other OS. I usually look for one that looks similar to my preferred font.
  3. Alternative - The third font in my stack will be an alternative that is similar to my preferred font, but perhaps more common. I might include a second alternate as well for the other OS if I think it's needed.
  4. Common - The fourth font in my stack will always be one of the common Windows or common Macintosh fonts. I strive to find a common font that is the same style as my preferred font. Ie. serif or sans-serif, etc.
  5. Generic font name - The last font I will list is one of the generic font names in CSS.
  1. About.com
  2. Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Design
  6. Fonts
  7. Font Stacks - How to Choose a Workable CSS Font Stack

©2014 About.com. All rights reserved.