ClearType is 10 years old this Autumn. For most of that time it lay hidden until Vista brought it to the fore by default. Font rendering in Internet Explorer using ClearType is good for body copy at smaller sizes; it’s a huge improvement on the Standard rendering that preceded it. However, larger display text is badly rendered. I don’t say it lightly, but every time I load a page for testing in IE7, I wince at the jaggies. What makes this worse is that Standard rendering is better at display size anti-aliasing. I used to compose scales and size headers to take advantage of smoother Standard rendering at larger sizes.
The context in which I view the text has the most influence over my reaction: Apple. I use a Mac. My browser of choice is Safari which uses OS X’s native ATSUI font rasterisation engine. Text is as beautiful as it can be on the Web right now. If text rendering in Firefox is disappointing in comparison because of the added weight, rendering in IE on Windows is positively distressing.
The quality of the rendering is dependent on various factors like the display type (LCD or CRT), the display resolution that has limited pixel density, the rendering engine itself, and the quality of the font file — specifically the hinting of the typeface.
ClearType was launched in 1998 at COMDEX by a celebratory Bill Gates. In a press release, the director responsible for the ClearType project, Dick Brass, was quoted as saying:
ClearType makes inexpensive screens look as good as the finest displays, and it makes the finest displays look almost as good as paper.
If only that were true. OK, it’s a press release, so we assume a degree of hyperbole from exaggerateers, AKA marketeers, writing the copy. But still. Let’s look at the evidence. I built a quick test suite using Georgia, Verdana and Arial because they’re some of the more commonly used Core Web Fonts. Here are screenshots of a heading set in Arial at 36px in different browsers:
-
IE7 with ClearType on XP Pro:
-
IE7 with ClearType on Vista:
Sample thanks to Ryan Brill (he was the first of many kind replies via Twitter). Thanks, all!
-
IE6 with Standard on XP Pro:
-
Firefox 3 OS X:
-
Opera 9 OS X:
-
Safari 3 OS X:
Compare the jaggies and dire anti-aliasing in IE7 using ClearType with the Standard Windows rendering of IE6. Also compare the heavier weight of Firefox using its own platform-independent engine with that of Safari using ATSUI.
Factual insights about the differences from professional font, browser, or raster engine developers would be welcome in the comments.
One of the reasons for the glaring difference between IE and Safari is a fundamentally different approach to web typography from Apple and Microsoft. Apple tries to render type as true to the original typeface design as possible, Microsoft uses grid-fitting when rasterising a font. There’s more in a previous article for those interested. Studies have shown ClearType to be more legible than Standard rendering, but they only compared the two. Expanding the study to test Macs and Linux-based PCs, as well as ensuring the test group was populated equally by people who use machines other than Windows PCs, would have all helped the results be more interesting.
Type rendering anomalies are a serious issue for web design. Designers and clients with an eye for detail want typefaces to render accurately and smoothly. Shaun Inman is right:
Until anti-aliasing discrepancies between platforms can be resolved I don’t see even a standardized approach being accepted by discerning designers.
ClearType fails to deliver good anti-aliasing. In my view it is a backward step from the old Windows Standard rendering. I am at a complete loss to explain why it is allowed to persist. Especially because Microsoft Typography seems packed full of experts in the field. Surely they’ve noticed?
Typography on the Web should at least equal the sophistication of print typography, if not enrich it. To do so, type needs to be rasterised correctly, and web designers need the ability to set it with much of the same subtlety and detail available in print. Until that time, technologies like Flash, PDF, and hacks like embedding type in images, will continue to thrive. Designers will use them not just because they ‘do type better’, but because they won’t have to deal with painful inconsistencies between user agents; the bane of the browser wars, and in this instance, the bane of web typography in what seems like the age of the raster wars.
