Phinney on Fonts

Browser Choice vs Font Rendering

Written by

Thomas Phinney

in

, , ,

This post by Jeffrey Zeldman on font rendering in web browsers is a good introduction to the subject in a number of respects, but unfortunately repeats a pernicious myth: that web browsers on Windows all render text differently, and that this interacts with the OS rendering. There are a couple of caveats (see below), but for the most part, this a this is a system level setting. On any given Windows computer running XP or Vista or Windows 7, you will generally get >pixel-​for-​pixel identical glyph rendering in Internet Explorer, Firefox, Chrome, or Safari. (As also shown in Si Daniels’ presentation at ATypI 2009 in Mexico City).

Why is this? All of today’s major web browsers on Windows (IE, Firefox, Chrome, Safari) simply use the OS’s user-​adjustable GDI text rendering settings, whatever those may be. Similarly, all today’s major web browsers on Mac OS simply use the system text rendering.

(Yes, there are a couple of caveats. Internet Explorer 7 actually ignores the OS setting in favor of its own prefs setting, which is to use the OSes ClearType rendering regardless. Safari for Windows has an optional setting to use Apple’s “Quartz” text rendering, even on Windows—this was the one-​and-​only rendering option in Safari 3 for Windows, but Windows users “freaked,” so Apple changed it for Safari 4 for Windows. Also, Firefox can use the kerning built into fonts, which affects spacing, though it doesn’t actually impact rendering of individual glyphs. Every major browser uses the same rendering as some version of OS rendering, however; none does something unrelated to Mac or Windows text rendering.)

So why does rendering vary so much? Windows XP, Vista and Windows 7 can be set to one of three settings for “font smoothing” (a.k.a. anti-​aliasing). These settings affect all applications using the old-​school GDI APIs for text rendering, which as of late 2009 means all the major web browsers. The font smoothing settings are:

  • off (uncheck the box that says “use the following method to smooth the edges of screen fonts)
  • Standard (grayscale)
  • ClearType (optimization for color LCD screens)


Note that the standard vs ClearType distinction only affects fonts with TrueType outlines. Fonts in PostScript Type 1 or OpenType CFF formats get a less sophisticated type rendering/​smoothing which, well, seems less than stellar these days.

“Standard” (grayscale anti-​aliasing) is the default on Windows XP, although installing Internet Explorer 8 will change that setting to “ClearType” (even if one then proceeds to use a different web browser). Windows Vista and Windows 7 default to ClearType. So, most folks on Windows are seeing ClearType rendering, one way or another. However, 

Besides GDI (all of today’s browsers), there is a completely different rendering mode used by applications which are programmed to use the “DirectWrite” text APIs (similar rendering also available to the largely-​ignored WPF APIs). This uses ClearType, but a ClearType which is improved over the GDI version. For TrueType outlines, It offers moderate but noticeable improvements, such as options for improved spacing, and anti-​aliasing in the Y direction. OpenType CFF fonts see a truly dramatic improvement, going from really mediocre rendering under GDI to rendering roughly equally well with TrueType under DirectWrite (or under its predecessor, WPF)! Minion Pro and Myriad Pro in OpenType CFF render pretty well down to 9 pixels per em (ppem), and just fabulously at 12 or more.

This is worth knowing and noting because it has already been announced that Internet Explorer 9 will use DirectWrite, and apparently FireFox is working on it as well.

[Post updated 8 Jan 2010 to correct IE 7 having a built in pref for which OS rendering it uses. Thanks to commenters! – T]

Comments

11 responses to “Browser Choice vs Font Rendering”

  1. Ethan Dunham

    @Thomas – I just tested it in XP and IE7 renders with clearType even when it is off system-​wide. Firefox on the other hand takes on the system settings as you describe.

    [That’s… interesting, and potentially worrisome to the general principle. I had my info on that point from Microsoft fonts program manager Si Daniels. I tested it myself in Vista with IE8. In that combination, I verified that IE simply responds to the system setting. Mind you, it can sometimes get temporarily confused, which is usually addressed by reloading the page or restarting IE. – T]

  2. Roger Black

    Thanks! All good points. Happy to learn, for example, that IE 7+ switches rendering to Cleartype in XP. 

    But most bloggers are tiptoeing around the increasing evidence that fonts that are *not* carefully hinted for Windows, look like crap when used below, say, 30 px. 

    And worse if the user left ClearType off in XP/​IE!

    An encrusted cynic might say that people who use XP don’t know what good type looks like, or don’t care, so let’s not worry about them. But the problem is that if a bunch of web fonts get out there without the right hints, the public could decide web fonts are a bad idea, and developers will retreat back into their caves.

    One font does not fit all, and we’re are going to have find a way to target the right font to each browser/​OS combination. (Mobile browsers will soon accept web fonts, too.) Even if Microsoft and everyone else embrace the new WOFF format, even if we abandon the hapless XP clients, we’ll have to deal for years with the trailing installed base of ClearType and EOT.

    The solution is for sites to outsource targeted font serving like they do Google ads. Both are complicated distribution problems, with many variables that are frequently updated. 

    We have the chance to get this problem solved. If we don’t, web sites may have to wait another 15 years to get a choice of typefaces.

  3. Art Thompson

    As someone who is less than thrilled with the execution of, but excited to no end with the possibilities of web typography I found your explanation of the current machinery and where it’s potentially headed comforting. I’m playing with TypeKit on a few websites with fairly good results, though I’ve been very conservative with my font choices. As for the delivery model, I do have faith in the cloud…for now.

  4. Mike

    In IE7, Cleartype can be disabled in the internet settings.

  5. Richard Fink

    @roger black who postulates:

    “The solution is for sites to outsource targeted font serving like they do Google ads. Both are complicated distribution problems, with many variables that are frequently updated”

    If I am correctly understanding you, you seem to be saying that there is something that “expert” font hosting companies can do about the way fonts render.
    On what evidence? Frankly, this makes no sense at all. Font serving firms have no more power to make fonts look good in various browsers and platforms than does any competent web designer or developer. And if they were to employ some hack that, somehow, magically made a font look good, it would quickly become known and copied by all.

    Ugly, beautiful – it’s all beside the point. The web grew like a weed when we were all squinting in the glare of CRT screens waiting and waiting for pages to download over dial-​up connections. Ah, the days when every font looked like crap!
    A few ragged edges isn’t going to stop anybody who wants to set themselves apart typographically.

    The uglier it is, the better I like it, actually. And if the past is any guide, I’m in the majority. Font-​linking promises a whole new wave of ghastly fonts that will probably bring another half a billion people online in just a few years.

    Now, if you’ll excuse me, I really must “retreat back into my cave” for the night, the sun is hanging low in the sky.

    Rich

  6. Gerrit

    When IE7 came out in 2007, I was quite happy, because while upgrading from IE6 to IE7 on WinXP, you could choose between ClearType and standard smoothing. ClearType was the default option, though, and it only affected IE7, not the rest of the system. You could assume that 90+ percent of IE7 users would have ClearType activated, even if they never would bother to touch the system-​wide ClearType settings.

  7. Richard Rutter

    “you seem to be saying that there is something that “expert” font hosting companies can do about the way fonts render.”

    Actually there is indirectly. If we assume that the fonts provided to font hosting companies by foundries are the most up-​to-​date versions, Cleartype hinted, and generally the best available for rendering on screen, then it is these fonts which will be used to render text and not older poorly hinted versions.

    Thus font hosting companies offer the possibility of ensuring that the best rendering fonts are used because they can always provide the latest version to browsers

    [Agreed that this could help. – T]

  8. Phil Ricketts

    Yes, this is true – I’ve seen many people say otherwise.

    It’s a shame, however, that so many webfonts look like crap when viewed on Windows-​based browsers. The common effect is that they look much lighter in weight than when viewed on a Mac browser.

    For instance, I recently found a lovely alternate font for OSX’ standard font, Hoefler Text. It looked lovely when replaced on OSX browsers, but when using it in an @font-face include on Windows browser, it just looked too light and sharp. This is a shame, because the alternate font was mostly for Windows browser user’s benefit when viewing the website in question. Because the alternate looked like crap, I just degraded to Palatino in the font-stack. 

    So, because of these font-​rendering issues, that I haven’t quite figured out yet, in Windows, I’m back to using web-​safe. How pointless is that?

    It seems like an axis of anti-​aliasing is missing, or something. I read something about hinting this morning, perhaps that is it.

    Of course, I could be missing something obvious, but I’ve done a fair amount of playing around with these technologies and haven’t got something I’m totally happy with yet.

  9. JG

    We have an application that renders graphics within a graphic viewer. When Font Smoothing is turned off, our rendering performance DRAMATICALLY improves. Why would that be? When font smoothing is on, an operation can take 60+ seconds. When it’s off, the time reduces to 6 or 7 seconds.

  10. John Daggett

    Ethan’s comment is correct, by default IE renders content text (not UI text) with Cleartype enabled under XP. Cleartype rendering is available under XP but it’s not on by default so most users aren’t aware of it. There’s an IE option to explicitly disable it (i.e. use grayscale rendering).

    Mimicing IE behavior probably makes sense for other browsers, with an option to disable it for those users that don’t like Cleartype rendering.

    DirectWrite does a much better job of rendering small text (<8px) and large text appears less jaggy due to better vertical anti-aliasing.

  11. Gabriel Naranjo

    There are huge problems that arise when using TypeKit with small fonts in Windows XP related to the problems mentioned here.

    For small size text I will have to default to Verdana or Arial in all the OS`s unless someone knows of a way to actually target CSS for Windows XP

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More posts