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.
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
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:
- Windows XP SP2
- Windows Vista
- Office 2003
- Office 2007
- Mac OSX Tiger
- Mac OSX Leopard (scroll down two thirds)
- Office 2004 (Mac) by inspecting my Microsoft Office 2004/Office/Fonts folder
- Office 2008 (Mac) is expected to be as Office 2004 with the addition of the Vista ClearType fonts
- Creative Suite 2 (see pdf link in first comment)
- Creative Suite 3
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
17/12/2007
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…
Vote Helpful or Unhelpful
17/12/2007
This is very useful. I think typography is my favorite design element.
Vote Helpful or Unhelpful
17/12/2007
Thanks for all the work you put into this!
Vote Helpful or Unhelpful
17/12/2007
The Windows and Mac font survery results are also a handy resource to understand which fonts are commonly found on PCs and Macs.
Vote Helpful or Unhelpful
17/12/2007
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.
Vote Helpful or Unhelpful
18/12/2007
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…
Vote Helpful or Unhelpful
19/12/2007
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.
Vote Helpful or Unhelpful
14/03/2009
I totally agree with the idea behind this and a larger font stack in theory, but each time I view a website that does this, Sadly the fonts look less than great on both win XP and Win Vista which is a large part of the web browsing market.
I think there has yet to be found the fonts [other than the arial/verdana etc standards] which actually DO alias well and are default on the main OS’s
Vote Helpful or Unhelpful
22/03/2009
Thanks, really helpful comparison table. Now I’m retrospectively changing the font stacks I’ve used in the past.
Vote Helpful or Unhelpful
10/05/2009
Thank you for this informative read, I really appreciate sharing this great post. Keep up your work.
Vote Helpful or Unhelpful
09/02/2010
With cufon, and sIFR, you can include any typeface in a browser.
Sure, you’re not going to use them on mass text/paragraphs, but there’s only a few fonts that I was use for those type of things anyway..
Vote Helpful or Unhelpful
Impress us