navigation

I recently have been playing around with Google Webfonts which allow you much more freedom in font selection on the web… for free. I’ve been using Google Webfonts on this very website, which is why the fonts are so pretty… at least I think so.

There is one downside though. Sometimes you’ll find that awesome font you want to use, and it looks great in OSX, but when you check how it looks on Windows… you can be quite disappointed.

What’s going on!?

Well, it turns out Windows and OSX have different default ways of rendering fonts. Roughly speaking, glyphs of a particular font are stored as black pixels or white pixels. On a high resolution medium this isn’t a problem… but on a computer screen, simply using black and white pixels can lead to jagged edges.

This is where font smoothing comes in. Font smoothing algorithms use semi-transparent pixels to smooth out these jagged edges. Whereas OSX uses something called Quartz font smoothing, Windows, it seems by default doesn’t use any font smoothing. (Although you can turn it on by going to Control Panel->Display->Appearance->Effects on XP, for example).

How do I make my fonts look nice on the web?

Fortunately, there’s a way to detect font smoothing using a little javascript. This method was the product of some great investigation by Zoltan Hawryluk, a strong proponent for better web typography.

The code he’s provided is great and works out of the box… but I, being a fan of Modernizr, wanted a way to detect font smoothing as a Modernizer test. That way, I could just plug the test into my head of my website and use css classes to display particular typefaces depending on whether the user has font smoothing enabled.

I’ve rewritten the font smoothing detection algorithm as a Modernizr test you can cut and paste into your website. Without further ado, here it is: