24 ways

to impress your friends

Increase Your Font Stacks With Font Matrix by Richard Rutter

Web pages built in plain old HTML and CSS are displayed using only the fonts installed on users’ computers (@font-face implementations excepted). To enable this, CSS provides the font-family property for specifying fonts in order of preference (often known as a font stack). For example:

h1 {font-family: 'Egyptienne F', Cambria, Georgia, serif}

So in the above rule, headings will be displayed in Egyptienne F. If Egyptienne F is not available then Cambria will be used, failing that Georgia or the final fallback default serif font. This everyday bit of CSS will be common knowledge among all 24 ways readers.

It is also a commonly held belief that the only fonts we can rely on being installed on users’ computers are the core web fonts of Arial, Times New Roman, Verdana, Georgia and friends. But is that really true?

If you look in the fonts folder of your computer, or even your Mum’s computer, then you are likely to find a whole load of fonts besides the core ones. This is because many software packages automatically install extra typefaces. For example, Office 2003 installs over 100 additional fonts. Admittedly not all of these fonts are particularly refined, and not all are suitable for the Web. However they still do increase your options.

The Matrix

I have put together a matrix of (western) fonts showing which are installed with Mac and Windows operating systems, which are installed with various versions of Microsoft Office, and which are installed with Adobe Creative Suite.

Thumbnail of font matrix

The matrix is available for download as an Excel file and as a CSV. There are no readily available statistics regarding the penetration of Office or Creative Suite, but you can probably take an educated guess based on your knowledge of your readers.

The idea of the matrix is that use can use it to help construct your font stack. First of all pick the font you’d really like for your text – this doesn’t have to be in the matrix. Then pick the generic family (serif, sans-serif, cursive, fantasy or monospace) and a font from each of the operating systems. Then pick any suitable fonts from the Office and Creative Suite lists.

For example, you may decide your headings should be in the increasingly ubiquitous Clarendon. This is a serif type face. At OS-level the most similar is arguably Georgia. Adobe CS2 comes with Century Old Style which has a similar feel. Century Schoolbook is similar too, and is installed with all versions of Office. Based on this your font stack becomes:

font-family: 'Clarendon Std', 'Century Old Style Std', 'Century Schoolbook', Georgia, serif

Clarendon
Century Old Style
Century Schoolbook
Georgia

Note the ‘Std’ suffix indicating a ‘standard’ OpenType file, which will normally be your best bet for more esoteric fonts.

I’m not suggesting the process of choosing suitable fonts is an easy one. Firstly there are nearly two hundred fonts in the matrix, so learning what each font looks like is tricky and potentially time consuming (if you haven’t got all the fonts installed on a machine to hand you’ll be doing a lot of Googling for previews). And it’s not just as simple as choosing fonts that look similar or have related typographic backgrounds, they need to have similar metrics as well, This is especially true in terms of x-height which gives an indication of how big or small a font looks.

Over to You

The main point of all this is that there are potentially more fonts to consider than is generally accepted, so branch out a little (carefully and tastefully) and bring a little variety to sites out there. If you come up with any novel font stacks based on this approach, please do blog them (tagged as per the footer) and at some point they could all be combined in one place for everyone to consider.

Appendix

What about Linux?

The only operating systems in the matrix are those from Microsoft and Apple. For completeness, Linux operating systems should be included too, although these are many and varied and very much in a minority, so I omitted them for time being. For the record, some Linux distributions come packaged with Microsoft’s core fonts. Others use the Vera family, and others use the Liberation family which comprises fonts metrically identical to Times New Roman and Arial.

Sources

The sources of font information for the matrix are as follows:

About the author

Richard Rutter Richard Rutter is Production Director at Clearleft web design consultants. He massages his ego on Clagnut where he harps on about accessibility, web standards and mountain biking. Richard drip-feeds a web typography project, The Elements of Typographic Style Applied to the Web.

Responses

Got something to add? Post to your own site and tag it 24ways07 and richardrutter to be included here.

Your comments

  1. § karim:

    Good point, and I think that this could be completed with, say, some conditional comments or something server-side to fine-tune the css-font serving depending on the client’s platform. But actually, IMHO, if I’m about to use “special” fonts for a webpage I’d rather use sIRF than a guess…

  2. § Andrew Mager:

    This is very useful. I think typography is my favorite design element.

  3. § Steve Dixon:

    Thanks for all the work you put into this!

  4. § George Ornbo:

    The Windows and Mac font survery results are also a handy resource to understand which fonts are commonly found on PCs and Macs.

  5. § Bram Pitoyo:

    Thank God I’m not alone in thinking that employing “non core” typefaces in the CSS is a sound alternative (see here for the code and reasoning behind it.) Georgia, Times and their core web friends are not bad fonts, but readers can and do get bored looking at the same faces over and over again.

  6. § Andy Beeching:

    Could you take this a step further with JS, and onload, or domContentReady (etc..), detect what font-family has been applied by the browser and set a class on the body element if font specific styles were needed to tweak the typography? That is, you’d probably optimise the type rules for your first choice font, but if that is unavailable and the fall-back fonts are applied, then details such as leading, size etc might require a touch of refinement (in the form of additional CSS rules) that you don’t want to apply by default. Trying to read the style object it seems that it only returns the original rule, as opposed to the applied one…

  7. § Jon Tan:

    Solid article and a well-made point about x-heights Richard. Rendering differences can be crucial, such as different baselines for Arial and Helvetica.

    Megan McDermott has previously put together a comprehensive list of system and bundled fonts , including those available with Ubuntu Linux which could also be useful.

Commenting is closed for this article.

24 ways: day 17