Keep Your Font Stacks from Falling Over
For most web designers and developers, testing is a huge part of the job. They’ll devote a considerable amount of time ensuring that their sites appear similar, if not identical, in a wide range of browsers. One key part of site testing, however, seems to be all too frequently forgotten: font stack testing.
The Problem
Most web designers rely largely on a set of free, widely distributed fonts for much of their site’s text content. Yet, no matter how widely available a font is, there’s still a chance it will be absent from a given visitor’s system. Fortunately, CSS lets us specify a stack of fonts to use in case the preferred font is missing. By specifying three or four fonts in this manner, followed by a generic catch-all serif or sans-serif, we ensure that our content is displayed in a font that at least resembles the one we wanted. In theory that’s great, but if the appearance of the site isn’t tested with each of the potential fallback fonts, problems can arise. For example, when viewing the PharmQD website on my home machine (running Ubuntu Linux), I see the following:
As you can see, the titles break onto an extra line, which was clearly not anticipated by the designers when they were putting together the layout. Why? Because the font stack used for these titles is Tahoma, Verdana, Arial, Helvetica, sans-serif;, and Tahoma is significantly narrower (at the same font size and weight) than Verdana or Arial. So when viewed on a system without Tahoma, the fallback font is used, and since all the fallbacks are wider, the text takes up more space than was anticipated in the design. Here’s what the design was intended to look like, this time viewed on my work machine, running OS X:
Tahoma isn’t the only font vulnerable to this kind of breakdown. Microsoft’s Vista fonts (Calibri, Cambria, Candara, and Constantia) are significantly smaller than most others fonts at the same point size, so using any of these in a stack can result in similar issues.
Testing Tools
Strangely enough, despite the wealth of testing tools available for web developers, there’s no simple answer for testing font stacks. One less-than-ideal solution is to use Firebug to manually edit the font-family declarations associated with the parts of the page that are highly dependent on font size: buttons, navigation items, headings, and so on.
A quick Google search also revealed this promising-looking project on Github: Font Stack Tester, by Robert Lee-Cann. It’s a jQuery script that adds an overlay at the top of a page with buttons to disable any of the fonts found on the page. The developer wants to eventually turn it into a bookmarklet, but at the moment it’s definitely in its infancy.
Update: In the few days since I originally posted this, an enterprising individual has registered http://fontstacktester.com/ and put up a hosted version of that GitHub project. Just enter your site URL, and it will take you there, adding a bar along the top that you can use to disable fonts one by one to test how your stacks hold up. Kudos to Chris for the speed with which this was developed!
No matter how you go about it, font stack testing should definitely not be neglected: when something breaks as badly as the example above, it can really damage that visitor’s impression of your site.