Which fonts can be used on the web?

Typography on the web is notoriously bad, there are only a limited number of fonts that can be used safe in the knowledge that they were originally installed on most PCs and Macs and should therefore be available on the end users machine. That is the limiting factor with the web, you can only use fonts that are available on the end users machine - if you specify a non-standard font and the user doesn't have it, the font will default to the next one in your list or a indeed a generic font.

Consider this piece of code:

body {font-family: 'Trebuchet MS', 'Gill Sans', Geneva, Arial, Verdana, sans-serif;}

This is instructing the browser to look for the 'Trebuchet MS' font first; if that is not available, look for Gill Sans, then Geneva, then Arial and so on.

The "Safe List" of fonts

The commonly considered 'safe font list' is as follows:

• Arial
• Arial Black
• Comic Sans
• Courier
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

You can safely use these fonts or a combination of these fonts on a web site without too many worries about them not working on the end users PCs. However you can also set non-standard fonts and use a similar safe font as a fall-back should the non-standard one not be installed. For example, Lucida Grande works well on the Mac, so you could use that as the first font. However, that's not a PC font, so the next should be Lucida Console which is the PC equivalent. You would then need to set some safe fonts as fall backs, should the Lucida fonts not be installed. So you could specify Geneva, Arial, Verdana and then the generic sans-serif.

There are other possibilities with web fonts and installing fonts remotely, but these are still not 100% fool proof and don't really offer a reliable alternative to using plain old CSS.

To get some help with which fonts to use, try Typetester from Maratz. It's a really useful tool for comparing fonts.

To broaden your font book a little you can define a nice mac only font and a nice PC only font, with the fall backs from the safe font list. So for example, for a nice serif font you could choose Baskerville for the Mac, Georgia on the PC with a fall back font of Times New Roman.

Modern browsers, particularly on the Mac, can render fonts beautifully and creative usage of the available fonts can add a really nice feel to a site without resorting to image replacements and Flash text swappers.

If you refer to our own home page, the font at the top right is Georgia, this has had a real renaissance in the least few years as serif fonts have been returning all over the web. When used as a header or quotation, with a fairly large font size it can look stunning.

Sadly, older browsers like IE 6 and below don't render the fonts the same way and it can look a bit pixelated - hopefully though the users of these browsers are a) used to it and b) going to come out of the dark ages and upgrade their browsers!

Hope that's been helpful and if you need any help with your fonts, please just get in touch.