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.