twitter facebook dribbble email

You’re using font embedding wrong

Careful! This post is looking a little old and could be inaccurate in many, many ways

Through the latter part of 2009 and continuing into 2010 the web community has been buzzing about font embedding. The growing support for font-face throughout modern browsers brought us more options than the few “web-safe” font’s that have been in use since the early days of the web. Although the support was there it still took the likes of Typekit to bring us new font’s en-masse. Their system of using the font’s managed to quell the concerns of some font foundries and open up a wider range of font’s for us to utilise.

Yet many designers have taken the fact that we can use these new font’s as carte blanche to go mad, using new font’s at every opportunity. Yet in truth the web isn’t ready for all these fonts, or at least our systems aren’t.

Headings Only

It was pretty much the unwritten rule of font replacement techniques such as Sifr and Cufon that they would be only used on headings. To use them on body copy would lead to issues with accessibility and readability. The disadvantages simply outweighed the benefit of having a more stylised web.

So with Typekit now in the designers arsenal it seems the rule book has been rewritten and any text is fair game for a new and wonderful refresh; anything to avoid Arial it seems.

So what’s the problem?

The problem is that while font embedding does a stand up job on headings the problems become more apparent when you approach 12px; the average size for body text. At this size most non web safe font’s appear slim, jagged and rather illegible. The cause of this is to do with font hinting which is critical for producing clear text.

If you look at sites using font embedding at these smaller sizes it’s rather clear that there’s a problem, at least on Windows machines. The truth is font hinting changes depending on both browser and OS and the differences become obvious at these smaller font sizes. So why do designers keep insisting on using font embedding for body text? The only reasons I can think of is that they are insufficiently testing their website or they don’t care and are happy to leave most users straining to read their website.

This isn’t even something I’ve noticed; Jeffery Zeldman has highlighted the problem before and yet still I see even well respected designers using font embedding on their entire website. When it comes to body text all you really need is a font that is clear and legible, so why look any further than the web safe fonts.