“Why does the same font on screen look fine on the Mac but like cr*p on Windows?” “How can I get fonts to look good cross-platform?” These are a couple of the most common questions I get about web fonts, which all have the same explanation. The short explanation: it’s an interaction between the fonts and the OS-level rendering. For the long explanation, keep on reading, and see the many screen shots at the bottom of the page.
Today, fonts display differently on the various platforms, but this wasn’t always the case. There was a time, for most of the 90s, when the same code was used to render fonts on Mac and Windows. Both platforms did aliased jaggy type when the font said to do so, and switched to anti-aliased grayscale type at the sizes the font told them to. On Windows, this was GDI grayscale rendering, the default rendering on Windows XP. You can still get this on Windows Vista or Windows 7, in most applications, by turning off ClearType (Control Panels > Display > Adjust ClearType Text).
Microsoft improved their GDI text rendering with a technology called “ClearType.” It’s optional in XP, and on by default in Vista and Windows 7, plus Internet Explorer 7 and up will turn it on for you. IE9 has switched to an even better rendering system, the DirectWrite version of ClearType. This is all very well, but between Microsoft Windows with their ClearType rendering and Mac OS X with Quartz (mostly inescapable, though you can tweak a preference to turn it off for small sizes), we now have different rendering approaches on different platforms. (I’m not even going to get into Linux text rendering, which uses a different rendering system entirely, usually FreeType.)
Okay, so they’re different. But why do we get the results we do with custom web fonts, where sometimes a font looks just fine on Mac OS but looks awful on Windows? To answer that, more background is needed.
Three key concepts you need to know about font rendering are “anti-aliasing,” “sub-pixel rendering,” and “hinting.”
- Anti-aliasing — Filling in diagonal or curved edges with shaded pixels to achieve a smoother appearance.
- Sub-pixel rendering — Turning on part of a pixel instead of an entire pixel. It’s most interesting when dealing with LCD displays, where each pixel is comprised of three vertical sub-pixels (red, green and blue), so you can turn on or off just one or two sub-pixels at the edge of a line to achieve effectively greater horizontal resolution. ClearType does this kind of LCD-optimized sub-pixel rendering.
- Hinting — Additional code in a font that improves its appearance at typical screen sizes, at least for rendering that cares about hinting (such as Windows). The code can be created manually or generated automatically, or sometimes in between. Full-on manual hinting is a lot of additional work, so is usually reserved for
The basic difference in the rendering approaches is this: Apple uses a softer and fuzzier approach to anti-aliasing, which does a better job of preserving the general appearance of letters, but at the cost of crispness. At any size you normally see, they also throw out the hinting of the original font and replace it with their own on-the-fly auto-hinting. So Mac and iOS rendering is much less sensitive to this aspect of font production quality.
Microsoft, on the other hand, does crisper rendering and relies on the hinting in the font to help the rendering engine get good results (though with ClearType on, the horizontal-direction hinting is less relevant). The result is that at small to middling sizes, a lot of fonts end up looking pretty bad on Windows.
Microsoft has continually improved their rendering, but as of this writing, the only browser using the state-of-the-art DirectWrite ClearType is IE9. The older versions of ClearType made an “interesting” trade-off: while they give effectively better horizontal resolution, they don’t do anti-aliasing at all in the vertical direction, only horizontally. This leads to people sometimes thinking of ClearType text as “jaggy” when it comes to diagonals and nearly-horizontal parts of curves. Some people even resort to a variety of tricks to get grayscale rendering instead of ClearType at really large font sizes.
Although intelligent design of the letter shapes can optimize fonts more for screen, it doesn’t make up for the lack of carefully hand-tuned font hinting code.
So the net effect is this: perfectly hinted fonts look great at all sizes in Windows browsers and apps. But the big mass of fonts out there, even most being made available as web fonts, have only automatically generated hinting code in them, and have some pixel size below which they will start to look like poop due to undesirable shapes, counters filling in, lack of space between glyphs, or all of the above.
To make it worse, what that minimum size is generally depends on which rendering you’re looking at. Whether or not you care about folks running old XP systems is, of course, up to you. Generally grayscale rendering (ClearType off, XP default) is worse at smaller sizes, but at least it has anti-aliasing in both vertical and horizontal directions. Indeed, nightly builds of Chrome 17 currently use ClearType at small sizes, and turn it off above 48 px, because they think it looks better. I’m inclined to agree with them, but I’d suggest they do it at a smaller size… maybe 24 or 32 px. Or use DirectWrite ClearType and get the best of all worlds (at least as far as Windows rendering options).
For WebINK, we’ve made it simple by rating each and every font for minimum usable size. For other fonts, check to see if the purveyor makes browser screen shots available, or just do a bunch of testing yourself.
To wrap it up, here are some detailed comparisons of different rendering so you can see the differences. Note how big the difference is, not only in the font samples but in the headings in Verdana!
Windows GDI ClearType samples
Windows GDI Grayscale samples: