Comparing Open Source Fonts – Part 2

May 20, 2010 at 7:56 pm by in design
 

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:

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

Font Best at or above Ugly at Illegible at
Cantarell 14px 12px 11px
Cardo 18px 14px 12px
Crimson Text 21px 18px 12px
Droid Sans 12px 8px 8px
Droid Sans Mono 12px 8px 8px
Droid Serif 12px 11px 8px
IM Fell (depends on the version) 30-24px 21-18px 14-12px
Inconsolata* 30px 24px 14px
Josefin Sans Std Light 36px 24px 16px
Lobster 24px 11px 11px
Molengo 24px 12px 9px
Nobile 16px 11px 8px
OFL Sorts Mill Goudy TT 18px 12px 10px
Old Standard TT 14px 12px 9px
Reenie Beanie 24px 16px 12px
Tangerine 36px 24px 18px
Vollkorn 21px 18px 14px
Yanone Kaffeesatz 24px 21px 12px

Windows Standard Mode

Windows XP default with Firefox or Chrome

Font Best at or above Ugly at Illegible at
Cantarell 21px 16px 11px
Cardo 36px 30px 12px
Crimson Text 24px 18px 12px
Droid Sans 12px 8px 8px
Droid Sans Mono 12px 8px 8px
Droid Serif 12px 11px 8px
IM Fell (depends on the version) 30-21px 21-18px 12-11px
Inconsolata* 21px 16px 11px
Josefin Sans Std Light 36px 24px 14px
Lobster 24px 11px 11px
Molengo 21px 16px 10px
Nobile 24px 12px 9px
OFL Sorts Mill Goudy TT 21px 16px 12px
Old Standard TT 30px 18px 12px
Reenie Beanie 24px 18px 16px
Tangerine 36px 24px 18px
Vollkorn 21px 14px 11px
Yanone Kaffeesatz 24px 21px 14px

Windows No Anti-Aliasing

Windows XP default with IE6

Font Best at or above Ugly at Illegible at
Cantarell 36px 30px 11px
Cardo 36px 21px 12px
Crimson Text 24px 21px 18px
Droid Sans 12px 8px 8px
Droid Sans Mono 12px 8px 8px
Droid Serif 12px 11px 8px
IM Fell (depends on the version) 30-21px 21-18px 14-12px
Inconsolata* 30px 24px 14px
Josefin Sans Std Light 36px 30px 24px
Lobster 24px 21px 14px
Molengo 21px 16px 10px
Nobile 30px 21px 14px
OFL Sorts Mill Goudy TT 24px 16px 12px
Old Standard TT 21px 14px 11px
Reenie Beanie 30px 21px 16px
Tangerine 42px 36px 24px
Vollkorn 24px 18px 14x
Yanone Kaffeesatz 24px 18px 14px

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).

Tags: , , , , ,

4 Comments

  1. Shemanarev has a technical explanation of why Windows’ type hinting does so badly at preserving glyph shapes.

  2. Pingback: blog.marekventur.de » Blog Archive » Google Font Directory in a single zip-file - Notizen und Informationen

  3. Your vision is very simplistic. Let me explain it to you:

    There are 3 types of cleartype: WinXP’s Cleartype, Windows Vista’s Cleartype and Windows 7′s Cleartype (the same as Windows Vista) and Windows 7′ DirectWrite Cleartype.

    By font rendering DNA:

    Internet Explorer v6 to v8: unknown + cleartype
    Internet Explorer v9: unknown + cleartype + directwrite
    Chrome: freetype + skia + cleartype
    Firefox v3: freetype + cairo + cleartype
    Firefox v4: freetype + cairo + harfbuzz + cleartype + directwrite
    Safari: quartz or cleartype (by default in recent versions is cleartype)

    As you see very complicated. The best rendering is with Windows 7 + Firefox 4. The worst is Chrome, awful font rendering!

    Directwrite on windows is an improvement but only Firefox 4 and Internet Explorer will be using it.

    I never use fonts as specified by the web designer. I always override the defaults and choose to use my own fonts.

    The best fonts for windows are fonts designed specially for windows. In Windows 7 case is Segoe.

    The worst about web fonts is that they will not use neither hinting or kerning. Web fonts are unnecessary. Let the choose the font. It will always be the best solution, since the designer can’t control everything given the diversity of rendering alternatives, display/monitor quality and size, and users’ eye problems.

    You should lobby the web browsers manufactures to make it easier for their users to choose their own font!

  4. Thanks Jack for the education! Though obviously you and I have a massive disagreement about who should choose the font.