Comparing Open Source Fonts – Part 2

The web has been alive with discussion on web fonts after yesterday’s announcement of the Google Font API. I wrote about it myself yesterday and here is just a quick sample of some of the more interesting articles and discussions:

• Real Fonts and Rendering: The New Elephant in the Room – Jeffery Zeldman, 24 Ways
• Google getting into the Web Fonts game? – Typophile Discussion
• Details on the new Google Webfont API – Paul Irish
• @font-face rendering flow chart – Typophile Discussion

Yesterday I commented on the legibility of the fonts in Google’s Font Directory on Windows with ClearType turned on. After seeing Miha’s awesome font rendering chart, I can see that my run down of Windows font rendering is only partially correct: Windows XP on default renders in “standard” mode which allows for a limited anti-aliasing smoothing but only at large font sizes or for fonts with proper Windows hinting—unless you are using IE6 and then no anti-aliasing occurs and it’s pixels, pixels, pixels.

As Zeldman points out there are more issues between browsers as well, with each browser handling font hinting a little differently, but that’s a mess I’m not about to get into. What I will do is expand my review of Windows font rendering to cover what it looks link with standard mode and no anti-aliasing. Also for your convince, I’ve added screenshots showing what it looks like with each mode (each font name links to it’s corresponding screenshot):

Windows ClearType

Vista, Windows 7, Windows XP with IE7/8, XP with ClearType turned on

Windows Standard Mode

Windows XP default with Firefox or Chrome

Windows No Anti-Aliasing

Windows XP default with IE6

Again I didn’t bother creating a list for Mac. If you are working on Windows you can use Safari to see what the rendering will look like on a Mac. Macs render type in a more consistent manner: as it decreases in size at worst it becomes a little more anemic and fuzzy. In the main, if your type is legible on Windows it is legible on a Mac.

Conclusion

Now looking at all these Windows rendering styles you can see how varying typeface legibility is: some fonts behave well across all rendering like Droid and others preform only good with one type of rendering like Inconsolata, which looks good in standard mode but terrible in ClearType and with font smoothing off.

The Droid Family is the only font in this set that I would use for body text. All others are only suitable for headers or display text. And I would avoid using Inconsolata, Tangerine, Josefin, and Cardo except at really large display sizes (36px or larger).