CSS Font Stacks

Web designers are often constrained by the so called “Web Safe Fonts” when creating web pages and whilst 95% of machines worldwide now have these fonts, they were first packaged with Windows XP back in 2001. As 2011 is quickly approaching are we still limited to these 10 web safe fonts or should we adapt and use fonts within CSS that aren’t in this list of fonts?

Now before everyone jumps to the comments section, I’m fully aware that there are other solutions including @font-face, Cufon and sIFR but they create their own problems with regards to font licensing. But there is a solution for certain situations and that’s to use more intelligent CSS font stacks.

What is a CSS font stack?

Anyone that is used to creating CSS will be familiar with a font stack:

body { font-family: helvetica, arial, sans-serif; }

The browser will use helvetica if it’s available (usually Mac’s), if it’s not available then it will use Arial (most PC’s) and then if neither of those fonts exist it will use the system’s sans-serif font. This is a fairly common concept and is used all over the web and most designers will stick to using a combination of Andale, Arial, Arial Black, Comic Sans, Courier New, Georgia, Impact, Times New Roman, Trebuchet and Verdana.

However, as mentioned earlier, these fonts were bundled with Windows XP. We now have many users on more modern versions of Windows and common software (like Microsoft Office) which comes bundled with other fonts which are now common to many more machines.

So we can use any font?

Not exactly.

But what we can do is use a font that isn’t included in the web safe font list and provide alternative similar fonts for users who don’t have that font installed on their machine.

For example:

p { Baskerville, "Times New Roman", Times, serif; }

Nathan Ford created an excellent article on CSS font stacks which has some great examples of using fonts by selecting your fonts using the following criteria:

font-family: ideal, alternative, common, generic

He also includes some great examples of good font stacks near the bottom of his post.

For more information on the use of certain typeface on different operating systems, codestyle.org/css/font-family/ has a ton of information and statistics on the subject.

A word of warning

Using font stacks isn’t just a case of picking fonts that look similar in style as letter spacing and sizing can vary significantly between certain fonts so it is always worth testing out how each of the fonts will look in practice. If in doubt then Nathan Ford’s list at the link above is a great starting point.

Also make sure that you set a client’s expectation right from the beginning. A lot of clients will be used to the way that print design works and therefore when you show the design using one font and the functional website uses a slightly different font due to the “ideal” font not being available on their machine, it can create some interesting and unwanted debate at the end of the project so I’d always advise any designer who is planning on using this method to be upfront right from the start and make sure that the client understands that the web is interactive and not all users will have exactly the same experience.