This is the third major overhaul of the Web Safe Fonts Cheat Sheet, which now includes examples of fonts suitable for the CSS @font-face property, along with revised CSS font stacks, font installation breakdowns by operating system, and some of the new Google Font API fonts.
It comes in A3 and A4 sizes and should print without difficultly on most domestic or office printers without cropping or readability issues. It is designed to be printed in greyscale.
If you want to accurately preview the quality of fonts when aliased it is recommended that you go for the A3 version using some good photo-quality paper.
As explained in previous articles, the overall installation percentages are calculated by combining results from the CodeStyle Font Survey and worldwide operating system statistics. On this last point, there are a few competing sets of figures out there and in the past I have used those provided by NetMarketShare After looking into how the statistics are gathered I have to say I have now ‘seen the light’ and have moved over to StatCounter primarily because it draws from a significantly larger sample than its competitors.
You’ll notice that Garamond almost made it in at just under 82%. I think it’s kind of cool that a typeface designed nearly 500 years ago in the early days of the moveable type printing press can still work perfectly well on the web.
Operating System Stats
I have now included a separate breakdown for Operating Systems:
The Windows, OS X and Linux percentages come from CodeStyle, the iOS details come from this useful summary by Nick Forge.
What About The Other Mobile Platforms?
If you are wondering why no other mobile platform is included, even though Symbian, Blackberry and Android have similar or better worldwide market share compared to iOS, this is because there are no standard font installs on any of these platforms. Each handset manufacturer puts whatever fonts they see fit on a device, making it impossible to generate any meaningful statistics. The iPhone, iPad and iPod Touch on the other hand are limited to a fixed range and Apple doesn’t even let end users install additional fonts! There is some deviation across iOS devices, as can be seen here, but I have only included fonts common to all.
You may also notice that the OS percentages don’t add up to 100% The missing 1% consists of the ‘other’ OS’s, including the remaining mobile platforms.
Revised Font Stacks
Not much to say here, other than I have tidied them up a bit based on various people’s suggestions, something I have been meaning to do for a while.
I also discovered some common Linux fonts that simulate the look of Palatino and Century Gothic, so have included those in the stacks.
There is now a box containing a sample of what I subjectively consider to be well designed fonts that can be used commercially with the CSS @font-face property without any licencing worries. All of these, with the exception of GrauBlau Web (which can be downloaded from here) are available from the Font Squirrel website, along with a ‘bulletproof’ generator that creates all the necessary CSS code and provides you with the formats required for each browser. Each font has it’s own licence so remember to read through and abide by the terms before use :)
A quick look on the Font Squirrel website reveals that they have catalogued over 600 fonts, and there are many more out there, yet I have only included twenty. As I said, these are my favourites, and I have loosely tested them on different browsers and platforms, at different scales, with and without anti-aliasing, with generally good results.
Google Font API / Font Directory Fonts
This has been available since April 2010 and has had a chance to ‘bed down’, but is still disappointing, in my opinion. I have only included the fonts that, after testing, seem in any way useable.
In principle it is a great idea, but the choice of fonts is lousy. My main contention is that most probably look fine when printed, but do not appear to have been designed for the screen at all. They can look awful at the smaller sizes and often become messy or illegible when aliased. Here’s a reminder of the issue from Google’s own preview as viewed in Windows XP (52% worldwide marketshare!) with the default ‘no ClearType’ setup:
If anyone wants to lobby Google to get their act together please feel free.
I hope people find this useful and as ever any suggested improvements are welcome in the comments below.
I am planning one day to make a web app version, which will give more space for a better range of previews (different browsers, OS’s, font variants, etc), when I find the time. Perhaps if I clone myself first…