Legibility of embedded Web fonts

It’s recently become possible to embed fonts in your website, so that you aren’t limited to using the same old fonts that everyone already has on their computer. Yay! Unfortunately, there are a lot of gotchas. Lots of people discuss the technical gotchas, but when you get past that, you’ve still got to worry about legibility.

Consider the recently redesigned online fiction zine, Chiaroscuro. As of this writing, they’re using an embedded font called Merriweather. EDIT 8 April: Chiaroscuro has removed the problematic font from its site.

Here’s what the first paragraph of body text for volume 47 looked like on my Mac, using Firefox 4:

Specimen of the Merriweather font as rendered by Firefox 4 on Mac OS X
Specimen of the Merriweather font as rendered by Firefox 4 on Mac OS X

Pretty slick, yeah? Unfortunately … here’s what that same para looked like on Windows, with the same browser:

Specimen of the Merriweather font as rendered by Firefox 4 on Windows
Specimen of the Merriweather font as rendered by Firefox 4 on Windows

The letters are squished together in places, and the lowercase Ns are too tall. It’s even worse on Linux: not all the strokes are the same thickness, some of the letters are still too tall (look carefully at the lowercase D, for instance) and others extend below the baseline when they shouldn’t (such as the lowercase R).

Specimen of the Merriweather font as rendered by Firefox 4 on Linux
Specimen of the Merriweather font as rendered by Firefox 4 on Linux

What causes this radically different appearance of the same font in the same browser? At typical body-text sizes, the computer has to draw each letter using only 15 or so pixels in each direction. It’s not possible to draw each letter exactly as the typographer intended, and keep all the lines crisp and smooth, with that few pixels. Windows, OSX, and Linux all resolve this dilemma differently: to oversimplify a bit, OSX tries harder to preserve the font shapes, Windows tries harder to make the lines sharp, and Linux tries to do both at once and winds up achieving neither. (For lots of technical discussion of exactly what the difference is, see these blog posts from 2007: Respecting The Pixel Grid, Font rendering philosophies of Windows & Mac OS X, Texts Rasterization Exposures.) People argue, loudly, about which choice is better (as the above blog posts and their comment threads demonstrate) but I think it would be relatively uncontroversial to say that the Windows font-drawing algorithm only works well with help from the font itself. The Merriweather font on Chiaroscuro demonstrates this: it doesn’t provide this help (it doesn’t have enough hinting information) so it looks fine on OSX, but horrible on Windows (and Linux – although there it’s not quite so much the font’s fault).

This isn’t just a matter of aesthetics (scare quotes because nobody wants visitors to think their website is ugly); it can mean that people can’t read your text. I myself find Chiaroscuro unpleasant to read on Windows or Linux, but my acquaintance Rose Lemberg, who has weaker eyesight, says the site is illegible. I don’t think Chiaroscuro set out to be illegible, but I’ll bet cookies to donuts Chiaroscuro’s designer didn’t bother testing their new font on anything but a Mac.

I don’t want to deter people from using embeddable fonts altogether; however, this is another reason why you can’t just test your site on one operating system. At the very least you need to be testing on OSX and Windows (and I understand there are significant differences between XP and Vista/7 in this area, by the way); I would thank you for trying Linux as well (maybe you don’t care about desktop Linux, but Android uses the same font-drawing code). You might think that the font libraries at fontsquirrel.com or Google Web Fonts would have been checked for good rendering on all OSes, but it turns out Merriweather is available from both sites! So, while I’d still recommend starting with one of those libraries’ body-text fonts, it doesn’t get you out of testing.

(Note: Merriweather’s designer is aware that it looks terrible on Windows, and is working on it. Still, it seems to me that inclusion in public catalogs of fonts designed for the web was premature.) EDIT 25 November 2014: As of the 26-Dec-2013 release, Merriweather looks much better on Windows and Linux.

Responses to “Legibility of embedded Web fonts”

  1. nemo

    Saying Linux is a bit oversimplifying. Any given linux distro may or may not be using the portions of TTF that [require paying Apple for a license]; your Linux is probably avoiding [them]. That’s hardly their fault :)

    http://m8y.org/tmp/testcase128.xhtml

    You might recognise this screenshot from the hacks.mozilla.org testcase.

    Anyway, as you can see. Not all fonts look horrible on Linux. Some look worse on OSX ;)

    1. Zack Weinberg

      I was oversimplifying on purpose; going into detail about all the intra-Linux variations (and the intra-Windows variations – GDI versus DirectWrite, XP versus Vista, ClearType forced on or not…) would have distracted from my overall point. And sure, you can find fonts that look better on Linux, or on Windows, but I think I’m on solid ground saying that OSX has a better chance of doing a better job on fonts that haven’t been carefully hinted (which I have heard can be nearly as much effort again as designing the font in the first place).

      Incidentally, according to http://www.freetype.org/patents.html, Apple’s patents on the hint interpreter have expired.

      [p.s. I’m taking the liberty of folding your comments together]

      1. nemo

        Funny. In the link I posted, the fonts were the exact opposite. Small web fonts with no careful hinting. All of them, to me at least, seemed to do better under Linux. And to my knowledge, that is due to:

        http://en.wikipedia.org/wiki/TrueType#Linux_and_other_platforms http://en.wikipedia.org/wiki/FreeType#Subpixel_font_rendering_patent_conflict

        Freetype’s automatic hinter.

        Again to my knowledge, OSX still does not use an automatic hinter, so Linux font rendering on fonts without careful hinting, should be superior, although the standard OSX high quality fonts should indeed do better under OSX.

        Of course, it might be true that at this point OSX is now using Freetype. That link dates back to early 2010.

        And, as noted in those articles, you are correct, the patent expired May of last year.

  2. Screwtape

    I think at least modern Ubuntu Linux defaults to ClearType-style hinting (vertical hints only) rather than the crisp setting your installation seems to use; at the very least I’d expect most Linux users to get better-than-Windows font-rendering out of the box.

    For those users that don’t use the default font-rendering configuration, that’s why Firefox lets you untick allow websites to choose their own fonts. :)

    1. Zack Weinberg

      It is entirely possible that I have misconfigured FreeType on my Linux box (if only by dint of having last looked at those settings several years ago, when the state of play was different). I mean to poke at that later tonight and maybe update the post appropriately.

  3. J. Andrews

    Here from Shweta’s lj where you left a comment. Very enlightening post, thank you.

  4. Andri Agassi

    I don’t know if they have fixed it or what, but I’m using Ubuntu and it looks perfect on my desktop, nothing like the screenshot you posted above.

    1. Zack Weinberg

      Could you do me a favor and go into System > Preferences > Appearance, Fonts tab, click Details…, and then post a screen shot of the dialog box that comes up? I was able to get it to look better on my computer by monkeying with the settings in there, but not as good as what you have.

      1. Alex

        It looks like slight hinting in that picture, which is similar to what OS X seems to do (it still performs the hinting, but with less impact on the final result)

        In my setup, I use the auto-hinter by default, but enable the bytecode hinter for fonts that I know have superior hints (like fonts by Linotype or such)

  5. johnjbarton

    Fonts on getfirebug.com stink. I complained but was told that is the way the Web works now. Good luck!

    1. nemo

      Looks great on my Linux and OSX machines. But you’re right, the lettering is kind of unattractive on my Windows machine, with or without cleartype.

      But then, I’ve noticed that about windows fonts even before web fonts, as soon as one strayed from a few basic types.

      1. nemo

        Solution:

        about:config
        gfx.downloadable_fonts.enabled=false

        On your windows machines :)

  6. Riccardo Attilio Galli

    I’m using Ubuntu too, and I find my font rendering to be better than the cases you posted. Your rendering on the linux box is broken.

  7. Sid

    Out of curiosity: What version of Windows was that screenshot taken with? If it was Windows Vista or 7, was DirectWrite enabled? If it was Windows XP, was ClearType enabled?

    The reason I’m asking is that with DirectWrite on, while that font looks a little strange, it’s nowhere near as bad as it is in your screenshot: http://grab.by/9P88

  8. G F Mueden

    Wimpy low contreast fonts in text entry boxex are hard for me to see. (Microsoft provided no robust fixed width font in my computer.) Could a sender who has a lot of elderly chients send to them with an embedded font that would be retter for their eyes so when they use his system to reply he cab see what he writes? ( I can barely see what I akm typing because it is tiny and pale compared to the rest of the page. Can’t see my typos.

    1. Benus

      Microsoft provided no robust fixed width font in my computer.

      What about Consolas and Lucida Console?

  9. Benus

    The Windows screenshot looks like Directwrite with the using Cleartype Tuner to force GDI Natural (which is what you would get in GDI applications like Microsoft Word when you checked the option to make the font metrics look more like the printout)

  10. Benus

    BTW, for Linux there are some great Freetype patches available that make subpixel positioning etc. possible.

  11. pd

    I think that font is barely legible on any platform.

    This web fonts trend is going to be a bloody disaster of crapple fanboy designers trying to make websites look like print media as they’ve always wanted to do but thank hell they haven’t been able to.

    Just when web accessibility and usability was getting fairly mature, along comes a graphic designers wet dream and a user’s worst nightmare.

    Why can’t web authors learn from the mistakes of the past? First there was animated gifs and blink tags, then DHTML abuses, then Flash and now just when Flash is starting to take a back seat, we have yet another new facility for designers to abuse user eyeballs: web fonts.

    Is there a way to disable web fonts yet? If not I’m betting there will be one very soon.

    1. nemo
      about:config
      gfx.downloadable_fonts.enabled=false

      as noted previously.

      NoScript also filters them by default due to higher possibility of vulnerabilities.

      I do think web fonts are pretty cool, since it prevents images of text, one of those banes of the web and stupid flash hacks like sifr. It also avoids designers designing for a font that only existed on their OSX box, and pages looking completely different on other computers, including hidden text or pushed down elements. Another nice thing for downloadable fonts, is they can be used for loading single colour vector art into a site, icons and such, with more reusability and flexibility.