MightyMeta

web-safe-fonts-cheat-sheet-v1-b

Introducing the Web Safe Font Cheat Sheet

| 54 Comments

In all the TypeKit and @font-face excitement, boring old web-safe fonts are getting overlooked. This article attempts to persuade you why you should give them a second chance, and provides you with the Web Safe Fonts Cheat Sheet!


This article was originally posted in April 2010. You can find out about Version 3 of the Web Safe Fonts Cheat Sheet here

Web Safe Fonts in 2010

Typographic design on the web has always been viewed as restrictive, when compared to what is possible in other media such as print and motion graphics. This is because web pages rely on the end user having the font installed on their local machine. If they don’t, the browser displays a default font instead.

Back in the late ’90’s and early 00’s, fonts that web developers could safely assume were installed on all possible end user machines were limited to a paltry five or six. In recent years, this number has increased steadily, as has already been identified by Ross Johnson, amongst others, back in 2008

CSS image replacement techniques were developed to allow designers to use their a range of fonts on web pages without having to worry about what end users had installed. In 2004 came fancy new ‘font replacement’ techniques using various technologies to offer more flexible methods — most notably sIFR and FLIR. Since 2008 Cufon and Typeface.js streamlined the process by offering more flexible and JavaScript only solutions, services such as Typekit have arisen to address licencing issues, and the CSS3 @font-face property is now supported in all major browsers. All of these show a steady progression towards web typography nirvana.

So Why Web Safe Fonts?

Contrary to popular belief, there are actually thirteen typefaces that you can safely use today with the basic CSS {font-family} property. There are many more that, depending on your audience, and with clever use of ‘font stacks’, are a safe bet. Yes, this is still incredibly limited, but for most uses, especially body text and lower-level headings, they are more than adequate.

Using basic web text over other methods has several benefits:

  • Text can be easily altered by editing the source HTML
  • Page load and rendering time is low, as no additional http requests or downloads are required
  • Text can be selected and copied by the end user
  • Text size can be altered by the end user
  • Restyling of text when using alternate or media stylesheets is straightforward.
  • No server or client-side scripting or browser plug-ins are required — they just work.

The Modern Alternatives

Lets compare this with other available methods:

CSS Image Replacement (Phark Method)

In 2003 Mike Rundle developed a method for replacing HTML text with an image of text (that can include any typeface available within the designer’s image editor) using CSS. Other methods existed, but this technique kept the HTML text visible to screenreader software, making the solution accessible to users requiring this method, and SEO friendly to boot.

Pros:

  • Can use any typeface available to the designer
  • No licence restrictions (as long as designer has purchased the typeface)
  • Accessible
  • Search engine bots can read text
  • When stylesheets turned off, text returns to default formatting

Cons:

  • Can slow page load times, especially if large number of images used
  • Only really practical for main headings
  • Requires jump back to image editing software to re-edit text
  • Can’t select or resize text (not so accessible!)

sIFR (Scalable Inman Flash Replacement)

Mike Davidson and Mike Wubben created sIFR in 2004 from a concept originally devised by Shaun Inman. It uses a combination of Flash to dynamically draw the fonts and JavaScript to inject them into the DOM.

Pros:

  • Can use any typeface available to the designer
  • No licence restrictions (as long as designer has purchased typeface)
  • Accessible — HTML text still available in source
  • Search engine bots can read text
  • When stylesheets turned off, text returns to default formatting
  • Can select and copy text

Cons:

  • Requires both JavaScript and correct installation of Flash plug-in to work.
  • Older implementations appear to cause scripting errors with newer versions of the Flash Player
  • Can resize text, but change only occurs after a page refresh.
  • The Flash of Unstyled Text, or ‘FOUT’ (The phenomenon where default text styles are made visible on the page whilst the custom font is being downloaded. First coined by Paul Irish)

FLIR (Facelift Image Replacement)

Cory Mawhorter is the author of this technique. By calling upon the PHP GD image library, it  dynamically generates images of the desired typeface, which are then injected on to the page using JavaScript.

Pros:

  • The image processing is server-side — only needs JavaScript to work
  • Relatively fast compared to sIFR (no discernable FOUT)
  • Can use any typeface available to the designer
  • No licence restrictions (as long as designer has purchased typeface)

Cons:

  • Text is replaced with an <img> element in the source HTML, rather than a Phark style CSS method, making this not particularly accessible or SEO friendly
  • Can’t select, copy or resize text
  • Awkward when requiring alternate or no stylesheets

Cufon / Typeface.js

These are two similar but independent technologies using only JavaScript to draw the typeface onto the page using either the HTML5 <canvas> element for Webkit and Gecko browsers, or VML for Internet Explorer. Cufon Link. Typeface.js link.

Pros:

  • Only needs JavaScript to be enabled to work
  • Font is declared using CSS, meaning fallbacks can be added to the stack
  • Text can be resized without a refresh
  • With newer versions, it is possible to select and copy text

Cons:

  • Looks a bit strange when alternate or media stylesheet are required. This can be resolved, but requires a lot of fiddly extra CSS and !important; declarations to hide the unwanted elements
  • Have to convert fonts to JavaScript files using a web-based application. Some fonts throw up errors and don’t work
  • Potential licencing issues regarding the conversion of font files, meaning that you are realistically limited to non-commercial fonts only
  • FOUT

@font-face:

CSS3 will see the reintroduction of a property that was first muted in CSS1, then removed in CSS2/2.1. The most recent versions of Safari, Firefox, Opera and Chrome will parse @font-face declarations. Surprisingly, Internet Explorer has been able to work with it since version 4, when it was first introduced, and never removed support for it, meaning it is one of the few CSS3 properties that IE will recognise.

Pros:

  • Simple concept — place a font file in your web directory and link to it in the CSS
  • Support in all major browsers — even IE!
  • Works just like standard web text, can select, copy and resize
  • No additional scripting required

Cons:

  • Licencing issues arise due to the fact that end users have to download the font
  • Concern over download times of some font files (see this article by Mark Boulton)
  • Font file has to be converted to different formats for different browsers, and a separate declaration is required for each
  • People have reported problems with the conversion process for .eot fonts
  • FOUT

TypeKit:

This is a paid online service by Small Batch, the team that lead the redesign of Google Analytics, and whose creative director is Jason Santa Maria, whose CV also includes the WordPress admin interface design, and creative director of A List Apart. Eek! It uses @font-face, but gets around the licencing issue by getting you to link to fonts stored on their remote servers.

Pros:

  • No licencing worries
  • Application interface is easy to use, and streamlines the amount of code you need to work with

Cons:

  • Premium packages could be viewed as expensive, although deals are available
  • Cheaper packages have bandwidth restrictions for your fonts!
  • Library limited to those that type foundries have agreed to make available
  • FOUT

So What Now?

As you can see, there is currently no perfect solution, although it goes without saying that each method will be appropriate in certain situations. However… before we leap into our font libraries to scour for fonts to include on our next web page, I believe we should reconsider what is available using the old fashioned CSS 2.1 font-family property.

The Web Safe Font Cheat Sheet

I’ve created a downloadable and printable ‘cheat sheet’ of all the main fonts that are safe to use on web pages today using {font-family}.

Explanation

What I’ve done is researched which typefaces we can realistically use and presented them in order of the likelihood of end users having the font installed. Each font is given a percentage, with examples of how the fonts look when rendered in browsers. I’ve also included suggested font stacks for use with the {font-family} CSS property.

Where Do Those Percentages Come From?

The percentages have been derived from data provided by the ‘Web Fonts Survey’ produced by Code Style. I combined these statistics with the global operating system market share outlined by NetMarketShare , which at the time of writing states that Windows holds 93% of the market, Mac OS X has 5% and Linux has 1%.

So, if we look at the Georgia typeface, according to the data this is present on 98% of all Windows installs, 93% of all OS X installs, and 61% of all Linux installs. Therefore (98% x 0.93) + (91% x 0.05) + (61% x 0.01) = 97%

I am fully aware that the reliability of the source data can be questioned, and that it is in reality impossible to accurately measure global font installs. The cheat sheet is intended as an indicative guide to aid design decisions, not an absolute truth. It is another tool in your arsenal that can be used alongside website analytics data and target audience profiling. To that end, I’d like to put forward a disclaimer: if you use a typeface from the sheet on a website and your client gets upset because they can’t see it, it’s not my fault!

Font Stacks Credits Where Credits Are Due.

The font stacks were heavily derived from an original article by Nathan Ford of Unit Interactive although you will notice that they have been tweaked and fiddled around with a bit.

What About Those Office Fonts?

These should probably be used with caution, and with suitable fallback fonts in the stack. I have listed typefaces common to all versions of Microsoft Office (both Win and Mac OS) since 2003. Although approximately only 60% of all worldwide computers have a version of Office installed, if your website audience is predominantly business or corporate, there is about an 80% chance that they will have these.

Future Plans.

The sheet is a work in progress that I intend to update and refine periodically. The stats will change gradually, and I plan to include additional info such as a breakdown of the stats by operating system. I also plan to create an online version, although I think for most people a hardcopy that can be quickly glanced at will prove more useful.

Suggestions and corrections are welcome in the comments.

Download Links

Paul Irish of FOUT fame has very kindly agreed to host the file and has also produced a low-res PNG version (see comments)

Download the low res PNG

Download the high res PDF

The original link to the MediaFire version is also available here

Thanks Paul.

I’ve made it available using a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported licence, which means that you can copy, distribute and alter the sheet without needing my permission, but must cite me as the author/owner of the copyright, can’t sell it on for commercial gain and must distribute any further redesign using the same licence.

The Licence: http://creativecommons.org/licenses/by-nc-sa/3.0/

Web Graphics App Survey

We are in the process of producing an application that aims to improve the PSD to HTML conversion process and need your views! If you like the web safe fonts cheat sheet, please take a few minutes to complete this survey.

The original article explaining about the survey is here.

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

54 Comments

  1. Was sad to see the PDF had to be hosted on mediafire, so I’ve thrown it (along with a PNG version) up on my server.
    Feel free to link them all you like.

    http://paulirish.com/lovesyou/web-safe-fonts-cheat-sheet-v1.png (low-res 2.4mb)
    http://paulirish.com/lovesyou/web-safe-fonts-cheat-sheet-v1.pdf (hi-res 9.8mb)

  2. Why is Helvetica missing from your list?

    • @Jeff Hoffman — It’s because although Helvetica is a favourite of graphic designers and has been included with the Mac OS for a long time, it is not installed by default with Windows. It is included with the Adobe Creative Suite, but for most end users this doesn’t help.

      According to the Code Style survey, it is only present on 7% of Windows machines, and since Windows has 93% of the market share, this makes its overall rating very low.

  3. Pingback: Tweets that mention Introducing the Web Safe Font Cheat Sheet | Devon Web Design and Development - MightyMeta -- Topsy.com

  4. Pingback: Introducing the Web Safe Font Cheat Sheet | Devon Web Design and Development – MightyMeta « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

  5. This is super super helpful and it’s good to see new fonts available for use :P

  6. Pingback: 2010-04-13 유용한 링크 | We are connected

  7. Pingback: Introducing the Web Safe Font Cheat Sheet | Dev Loom

  8. Let’s just move to the CSS3 @font-face. Everything else works now, but is just crap tomorrow.

  9. This is very helpful when deciding which manner to modify the font face. Thanks for the .pdf sir!

  10. Pingback: CSS Brigit | Web Safe Font Cheat Sheet

  11. Very handy, thanks!

    Helvetica isnt on the list simply because it isnt a web safe font. It doesnt come as default on Windows machines, thats unless W7 has it. Vista and XP certainly didnt. MacOSX has what? roughly 5% of market share..

  12. Very informative list, but do you have printer friendly version? or maybe a with white background…

    Thanks

  13. Cool article, thanks very much. Just the link to the CSS Image Replacement Method of Phark Method doesn’t actually work.

  14. Thanks for the cheat sheet. But I don’t agree with some of your font stacks.

    1) Arial, “Helvetica Neue”, Helvetica, sans-serif;

    You have kept Helvetica as backup, but according to Code Style Arial is installed on over 97% PCs, so will it ever get chance to show up. Also we have included sans-serif at the end which will pick up helvetica on Mac as default sans-serif in case Arial is not installed.

    Revised Font-stack: Arial, sans-serif; as used by Jason Santa Maria (http://jasonsantamaria.com) on Typekit (http://typekit.com)

    2) Times, “Times New Roman”, Georgia, serif;

    Times (over 97% on Mac)/Times New Roman (98% on PC) won’t let Georgia (95% on Mac, 98% on PC) out.

    Revised Font-stack: “Times New Roman”, Times, serif;

    3) Georgia, Palatino, “Palatino Linotype”, Times, serif;

    Will Palatino (80% on Mac, 98% on PC) will ever have chance over Georgia (95% on Mac, 98% on PC)?

    Revised Font-stack: Georgia, “Times New Roman”, Times, sans-serif;

    4) “Trebuchet MS”, “Lucida Sans Unicode”, “Lucida Sans”, Arial, sans-serif;

    You missed Lucida Grande (over 99% on Mac) here.

    Revised Font-stack: “Trebuchet MS”, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Arial, sans-serif;

    My point here is that font-stack should be logical and make sense and not just arrangement of fonts after one-another.

    More about font-stacks: http://www.awayback.com/revised-font-stack/

    • @Amrinder thanks for the input. The beauty of the web is its collaborative potential. When I’ve got a mo I’ll look into incorporating your suggestions onto the next version, your Arial revision in particular makes a lot of sense. I think the logic of the original stacks were to cover most situations, such as when an end user has Georgia without Times, no matter how obscure, but I can very much see your point.

    • Although I’m necroposting I gotta thank Amrinder for opening my eyes about font stack’s. I’m guilty of never giving much significance to stack order.

  15. Pingback: Introducing the Web Safe Font Cheat Sheet « Insomniaonline

  16. Great and very helpful work. Thank you very much!

  17. What most people seem to forget about using @font-face are the implications for people using aliased fonts.

    There is still a HUGE proportion of people out there using Windows XP that came without any kind of font smoothing enabled.

    There is a reason those fonts are ‘web safe’, it’s because people have spent years tweaking them to work well as pixel fonts at small sizes. It’s why Verdana is so huge.

    There is no font stack or javascript workaround for that either as there is no way to detect an OS setting from the browser. Try looking at the Marc Boulton site without ClearType switched on, it’s not pretty.

    If you want to design for the masses, you either need to be very choosy about the fonts you pick. Or avoid @font-face.

  18. Pingback: Introducing the Web Safe Font Cheat Sheet | Devon Web Design and Development – MightyMeta : Popular Links : eConsultant

  19. I’m all in support of @font-face with using fonts from Font Squirrel. I’ve had good results on multiple projects, in multiple browsers.

    Good article.

  20. I have recently been a lot of research on web typography and this article is by far the best I have seen. Good work!

  21. Pingback: links for 2010-04-15 « Mandarine

  22. Pingback: Miromedia Blog - “Is it safe?”

  23. Thanks for producing a comprehensive and easy to use cheat sheet. Am sure I will be referring to it constantly!

  24. Pingback: links for 2010-04-18 « 個人的な雑記

  25. Pingback: April 18th | lifestream

  26. Fantastic resource, thank you! No mention of comic sans though :D

  27. Pingback: Web Type « MHCCIM:GD150 Fall 2009

  28. Pingback: links for 2010-05-01 | Peter’s Side Thoughts

  29. Pingback: All about @font-face - FrancescoMugnai.com - Graphic Design Inspiration and Web Design Trends

  30. I am a web designer in UK and this information is really a big lift to my profession. Thanks.

  31. Thank you for your help!

  32. This is a very handy cheat sheet for web safe fonts. Thank you very much for sharing :)

  33. Pingback: Web Safe Font Cheatsheet — omglog

  34. Pingback: Web Safe Font Cheat Sheet « CultureDebate

  35. google analytics also provide great data about website statisitics””.

  36. the best website analytics that i know is none other than google analytics.,:

  37. Pingback: Help with HTML and FONT

  38. You you should make changes to the blog title Introducing the Web Safe Font Cheat Sheet | Devon Web Design and Development | MightyMeta to something more catching for your content you make. I liked the the writing all the same.

  39. Pingback: Rizen Creative » Nifty links, November edition.

  40. This is a pretty interesting article. I am a Mac user and I have to say that anything that can get round the abysmal font rendering that IE and FF generate on a PC has got the thumbs up from me. But I do wonder about how well any of these techniques would truly work across browsers and whether you are jut creating a problem whilst solving one???

    • The main argument I am making in this article is that most of the new techniques covered here do trip up in some browser/OS configurations, whereas plain old ‘web safe’ fonts (particularly stalwarts like Arial, Verdana and Georgia) are work fine in almost all given situations.

  41. This has so much helpful information! Thanks for sharing.

  42. Could these fonts used within Flash applications? Thanks in advance.

    • Technically yes, they can. Flash, if I remember correctly, can embed fonts within an .swf, so you don’t need to worry so much about what the end user has installed, but instead need to check if there are any possible licencing restrictions.

      Since all the web safe fonts here are system fonts, they should be fine. Not so sure about the licencing of the Office fonts however.

  43. Very helpful post thanks — and some great updates in the comments too.

  44. Thanks for all

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