Font-families a Web Developer can trust

I have worked with designers in the past who come from a very print-centric background. When it comes to print, designers can pick from a sheer endless variety of fonts. But when you want to pick a font for your Web site design, well, the collection gets considerably small. But which font-families are regarded as “safe to use” these days?

Luckily, with CSS, you have the ability to put in some sort of fallback mechanism that comes into play when the first font-family you mention is not available, the user agent picks the next one in the list, and so on. But especially people coming from a print background, they tend to ask which fonts they can use and be almost hundred percent sure that what they see on their screen will look the same to what their users are going to see. Well, what is a hundred percent certain these days…

It is always hard to answer such a question, but thanks to some people out there, there is some statistical data out there to back up whatever your answer might be. The guys at Code Style conducted a survey (which is still ongoing I think) and came up with the following results, nicely broken up into categories:

• Windows font survey results
• Mac font survey results
• Unix font survey results
• Combined survey results

VisiBone is another provider of a font survey, conducted amongst 800 systems. Their results can be viewed on one big page on their site. WebSiteWorks combines these two surveys and provides conclusions regarding those findings. In a different article, the are talking in more detail about what they consider the 31 of the most commonly encountered fonts from all operating systems. Vivien also provides a nice summary of fonts which are popular with web designers these days.

Conclusion

Taking a look at these results, it becomes quite obvious that if you really want to make sure that you are only using web safe fonts, you are down to a handful number of fonts (with a focus on Windows and Mac).

If you consider using fonts that are below 90% in the surveys - which is a number that I came up with and I would consider everything above that figure to be web-safe - on any system, you need to provide a “fallback font-family” in your CSS.

So, for example, you are a designer who works on a Mac and really wants to use Monaco as your font of choice on a web project, you need to mention a fallback font in your CSS. Why? If you have a look at the surveys done by Code Style, you can see that almost 97% of Mac users have Monaco installed, but the font is not even listed in the font survey for Windows machines. So, lets say, you choose Tahoma as your second font of choice, you could note that in your CSS as follows:

body {
  font-family: Monaco, Tahoma, sans-serif;
  font-size:12px;
}

So, I guess, when you come from a print background and are used to the luxury of being able to choose every font you want for your design…well, as a Web designer, you need to show a little bit of flexibility when it comes to fonts. That said, of course you can still use your favorite font of choice, if you are inclined to do so, but only if you convert your whole text into a graphic or Flash (which is used for image replacement techniques). Apart from headings (which only get replaced by nicer graphical headings), any part of your body text should never ever be a graphic.