MightyMeta

web-safe-fonts-cheat-sheet-v3-b

Web Safe Fonts Cheat Sheet v.3

| 4 Comments

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.


web-safe-fonts-cheat-sheet

Download Links

Download (A3 TIFF, 8.8 MB)

Download (A4 PNG, 460 KB)

Printing

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.

Statistics

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.

Font Windows OS X Linux iOS Total
Courier 99.71 99.24 67.62 100 98.7
Times
99.71 98.48 67.91 100 98.6
Arial 99.71 97.73 69.05 100 98.6
Verdana 99.71 97.98 67.05 100 98.6
Trebuchet 99.32 94.95 65.33 100 98.0
Georgia 99.03 95.71 66.19 100 97.8
Lucida 98.83 100 68.25 0 97.7
Impact 99.03 91.92 64.18 0 97.3
Tahoma 99.9 84.6 0 0 97.2
Palatino 98.83 81.06 96.28 75 96.9
Arial Black 98.25 94.44 65.62 0 96.8
Arial Narrow 88.74 90.4 0.95 0 87.3
Century Gothic
87.88 39.39 97.99 0 84.1
Garamond 86.65 31.82 7.11 0 81.7

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:

OS Breakdown

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.

@font-face Fonts

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.

For those unfamiliar with how it works, the API is essentially @font-face but with Google hosting the fonts rather than you having them on your own server. This is beneficial since it saves you a bit of bandwidth, plus if the end user has been to another website that used the same font, their browser will have it already cached. Google also provide some fancy JavaScript that is supposed to help with FOUT.

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:

Tangerine Aliased

If anyone wants to lobby Google to get their act together please feel free.

Licence

Creative Commons Attribution-Non-Commercial-Share Alike 3.0 unported Licence

Conclusion

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…

If you enjoyed this post, please consider sharing it using the above buttons, leaving a comment or subscribing to the RSS feed.

4 Comments

  1. Looks like Google’s gotten it together a bit more since this article was published; fonts like PT Serif and PT Sans are fast becoming web standards (and have been available on services like Font Squirrel for a while) and are now part of the API.

    Now if only browsers for Windows would get their anti-aliasing act together!

  2. Pingback: Quora

  3. Just thought I would leave a comment for those just coming across this article… It’s been a couple of years since’s the OP’s article and since then Google has been hard at work expanding the available fonts on their service. It’s worth a serious look and possibly, if you’re the author of this article, an edit to let others know that google fonts has grown up quite nicely.

  4. Hello to every one, its truly a fastidious for me to visit this site, it contains helpful Information. dbcdeagdde

Leave a Reply

Required fields are marked *.


MightyMeta, 8 St Lawrence Lane, Ashburton, Devon, UK, TQ13 7DD

Powered by WordPress | Theme Derived From "Yoko" by by Elmastudio

Scroll To Top