Picking A Proper Font Stack

June 3
blog author

Appno Blogger

Appnovation Coop

When starting work on a new web project, typographic choices can become something designers obsess over. They could sit at the computer trying out different typefaces for hours in order to set the right tone or mood for the site and increase legibility. After that much nitpicking, the first priority of a designer/themer should be to carefully create useful and elegant CSS font cascades (or stacks), so their hard work is preserved as best as possible across all browsers and operating systems. Not every client will need or even want font replacement tools such as Cufon or Typekit, but you can still have some degree of fun with carefully constructed font stacks. Here are some tips!

Don’t be worried about “web-safe” With a thoughtfully created font stack, you don’t have to worry about using only web-safe fonts. Palatino, for example, is a font that is found on many computers, both Windows and Mac. As long as you allow for proper degradation if a user doesn’t have it installed on their system, why not allow those that do enjoy it?

Place the special, non-websafe fonts you want to show off at the “top” of the stack Place non web-safe fonts first in the font stack, and then list the more generic, web-safe fonts afterwards. In the example below, if the user doesn’t have Palatino installed on their computer, Georgia will be used instead. If Georgia were listed first, even users that did have Palatino on their computer would still see Georgia – unless they uninstalled it from their system (probably not a good idea). Font-family: Palatino, Georgia, serif;

Helvetica doesn’t look that nice on Windows It’s a sad truth. What to do? I’ve seen an elegant solution around the web: Font-family: Arial, sans-serif; Using this stack, Windows users will see Arial, which is similar is size and structure to Helvetica, but looks much better on their machines, and Mac users will default back to their generic sans-serif – Helvetica. Problem solved.

Be careful of font x-heights when creating stacks We want to use stacks so copy and headlines appear the same across all browsers and operating systems, regardless of what font is being used. But not every font is built the same – some have larger or smaller x-heights. (X-height is the distance between the baseline and median line in a typeface, which is usually the same as the height of the “x” character of a typeface.) Arial and Verdana are a great example: Verdana has a larger x-height than Arial, which makes the font itself appear bigger. This can lead to text bleeding outside of designated areas, a definite no-no. If you want to check your stacks before you deploy them, here is a great resource: http://ffffallback.com/