Getting started with font stacks

A font stack is the instruction in a page of CSS code that tells a browser what fonts to display, and what to do should the first choice font be unavailable or not working.

 

Designers can specify any font they wish in their CSS, but if the visitor’s browser can’t find that font file then it will choose a system font on the basis of its default settings. To almost any typographically-inclined designer, that degree of randomness in the outcome will cause many sleepless nights.

To combat that randomness, a font stack will tell the browser how it should behave if the designer’s specified font isn’t available, working through a list of fallback options that get progressively broader in definition.

Font stacks are included as part of the “font-family” CSS declaration. Here’s what a typical font stack might look like in a chunk of code defining the basic body text for a website:

body {
font-family: “Supria Sans”, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 18px;
color: #000;
}

In first position is the designer’s preferred font, in this case a contemporary interpretation of a famous Swiss typeface. Next is an acceptable alternative, followed by a more widely available but not so well loved font. The last reference is a generic description that the browser understands and can use to pick a system font that will be from the same general category as the first choice font.

Building a font stack is one area of web design where typophiles can really bring their existing knowledge into play. Consider the fallbacks’ line length, x-height and contrast as well as its classification, style and weight. Match your fallbacks as best as you can, but be prepared for those progressively broader compromises.

Remember to take your readership into account: different types of internet users will have different types of operating system. The fonts that have shipped with operating systems have changed over the years, so a tech-savvy audience will be better equipped with the latest system fonts than certain types of casual home user. A search for “XP system fonts list” returns several good resources, including Microsoft’s own site and a Wikipedia page. Software packages (MS Office and Adobe CS Suite are the most obvious examples) also often ship with font libraries, so with some careful research and target user group identification, your fallback fonts needn’t be limited to the most widely available options.

Best practice for font stacks:

  • Always choose fonts that render well on screen at the intended sizes.
  • Consider the fallbacks’ line length, x-height and contrast as well as its classification, style and weight.
  • Choose your fallbacks to match your visitors’ likely technical capability and/or operating system.

Font stacks are a powerful tool that can do more than just manage the way a browser knows which font to display. In future articles, we'll talk further about how to match typographic choices to types of user, and how to manipulate our fallbacks to create some interesting typesetting effects and tricks.