Posted December 7th, 2011 in Things of note by Matt

For a long, long time websites were restricted to using the web safe set of fonts – fonts that you were pretty sure would be on the computer of anyone who visited the site.

In the last few years various font replacement techniques have been used, some more succesfully than others.

Sifr used to be a favourite of mine until the use of flash started to become a problem. There were various instances where an upgrade to Flash knocked out the font display in the site, and of course anyone who wants their site to be readable on a iphone/pad/pod would need to avoid this approach.

Cufon is another great font replacement technique that uses javascript and a canvas element to draw the font, replacing the text. I still favour this at times due to the quality of the font that is drawn – crisp, smooth and anti-aliased across all browsers. The downside, of course, is that it needs javascript in order to show as you intended. It also adds weight to the page, increasing the load time, and can result in a staggered load of the page – first unstyled, then with the replaced font coming in. Because of this I’ve always recommended that it only be used for headings and possible single blocks of text, such as a pull quote.

Increasingly, I’m finding the use of webfonts to be the best approach to opening up the possibilities for text.

Google WebFonts is a great, free online resource which hosts the fonts for you. And there are a number of font foundries that offer either cheap or free fonts that can be isntalled in webfont format. For example FontSpring.

This has the benefit of loading in much more smoothly than flash or javascript replacement and at a lower overhead, so fonts can be replaced throughout the page, not just the headers. You do still need to be slightly cautious, however, as not all fonts render well at all sizes (small body text is often nasty with the more decorative fonts) and some browsers render the fonts more cleanly than others at the larger sizes. Firefox can often render large heading fonts as slightly jagged.

Comments are closed.