Written by on

Using Font Stacks to Create Better Themes

One of the hardest battles in creating a theme is making the site look consistent on different browsers. Most people will think of image issues such as how older versions of Internet Explorer don’t handle transparent PNGs very well, how different browsers render some CSS rules properly while others ignore or mangle the results, or how mobile devices and tablets have added additional layers of complexity. However, there is another primary concern when crafting your designs: text.

Making text look identical on all browsers and on all operating systems (Windows, OS X, Linux, etc) is nearly impossible. Each browser has it’s own default font family, font size, etc that it uses. Each operating system comes with a different set of default system fonts. Users are free to add fonts to their system, further complicating the landscape of available fonts.

In other words, just because a font shows up for you on your installation of a specific operating system in a specific browser does not mean that another user will be able to see the same font on their computer, operating system, browser, etc. Just because some text fits inside of a 500×200 pixel box on your browser doesn’t mean that it will on everyone’s browser.

Since no web developer can rely upon a single font being available to every visitor to a site, the idea of a font stack was created. A font stack is simply a comma-separated list of font families which creates a list of fallback font families. If the first font family isn’t available, the browser will try to use the next one. If an available font family is unable to be found, the browser’s default font family will be used.

The following is an example of such a font stack:

'Helvetica Neue', Arial, Helvetica, sans-serif

This font stack says that Helvetica Neue should be used first. If it isn’t available, use Arial. Next up is Helvetica. Finally, if none of them are available, the generic sans-serif font family will be used.

The generic font families allow for a generic name that every browser will understand and support. Of course, the specific font used by each browser for a generic font family differs. Each font stack should end with a generic font family in order to ensure that the desired type of font family is used. The available generic font families are serif, sans-serif, cursive, fantasy, monospace.

Font stacks are typically constructed to have a consistent x-height (the height of a lowercase “x”). This is so that the height of the text can be consistently known. While x-heights can typically be matched with a good level of certainty, the width of the different characters can vary widely. This means that while you can keep the height of each line of text consistent, you cannot rely on knowing the length of the text. This also means that you can’t know how many lines the text will fill since the width varies. This is an unavoidable issue.

The following image is a good example of this in action. It uses the font stack currently used on Microsoft.com"Segoe UI", Tahoma, Arial, Verdana, sans-serif — with each font family of the stack shown on a line.

Notice how each line is a different length. Verdana seems to render each character a bit wider with a bit more space between each character. This causes it to use much more horizontal space than any of the others in the font stack.

So how does this affect you and your themes? There are two primary takeaways:

  1. Always use a well-designed font stack when setting the font-family in your style sheets.
  2. Never assume that you know exactly how large text will render.

So, rather than doing this:

body {
    font-family: Helvetica;
}
h1, h2, h3 {
    font-family: Georgia;
}

Do this:

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
    font-family: Georgia, Times, 'Times New Roman', serif;
}

When I’m just getting started with a font stack, I will test it on as many systems and browsers as I can get my hands on. I will then remove the first font family from the stack and look at the site again. I will keep doing this until I get down to the last font family. This gives me a good feel for how the text and the overall site will look when rendered with the different font families and helps me make sure that I didn’t make anything size dependent that may break on someone else’s browser.

Of course, this still leaves the question of where you can get font stacks from. If you are an amazing typographer with an intimate knowledge of the different typefaces, I say go for building your own. If you are like me and would prefer trusting someone else’s to design robust font stacks, check out the following resources. They will give you a great starting point.

  • Revised Font Stack – There is a listing of font stacks towards the bottom of the post. The case studies are interesting as well and should be read if you want to get a better understanding of how font stacks work and why some orders of font families make more sense than others.
  • CSSFontStack.com – A straightforward listing of font stacks built around a starter font family.
  • Better CSS Font Stacks – A description on how to construct font stacks. It includes details on what makes for a good body copy font stack versus a good title font stack.
  • The myth of web-safe fonts – Description of two serif, two sans-serif, and one monospace font stack.
  • Guide to CSS Font Stacks: Techniques and Resources – A Smashing Magazine post on the topic with links to many additional resources.

Additional resources used to create this post:

We’re still trying to figure out the best balance between technical articles and theory articles such as this one. If you liked this article and would like to see more articles talking about the theory and techniques behind web design and development, please let us know in the comments.

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35