Display Type & the Raster Wars

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.

21 Comments

1. By Gustavo Ferreira on 6th Nov ’08 at 16:10pm

jon,

there are two versions of cleartype – the one shipped with windows xp, and the ‘improved’ one shipped with vista.

which one is shown in sample (i)? (i suppose the latter.)

for the sake of completeness, it would be nice to have a sample showing the other version.

regards,

– gustavo.

2. By Jon 陳 on 6th Nov ’08 at 16:19pm

Hi Gustavo, unfortunately the sample is of the former (XP Pro). I’ll update the labels. I have a copy of Vista Ultimate, but unfortunately uninstalled it because I couldn’t run multiple versions of IE for site testing. Also, I wasn’t aware there was a different version — thanks for pointing that out! A different sample would be useful, I agree. I’ll try and get one and update the post. (Ed: Post is now updated with IE7/Vista.)

3. By johno on 6th Nov ’08 at 17:35pm

Let’s hope that with John D. Berry’s move to MS, we’ll see something change. Might be worth you emailing him re your finds.

4. By Ian on 6th Nov ’08 at 20:48pm

Aliasing grabs my eye all the time and bothers me, but even ClearType does not seem to help with the issue as you’ve illustrated.

A current installation of Ubuntu 8.10 on a laptop with a couple font settings adjusted actually looks as good or possibly slightly better than OS X, however, there’s a lot of adjusting going on to obtain that look.

I’ve always been partial to Safari on OS X, but some people claim that the text looks blurry. I think that if it’s blurry, you are too close to the monitor.

Are there any other methods out there that have been suggested (not sIFR) to solve this problem, or are designers just hoping one of the big software developers decides to tackle it some day?

5. By Ben on 6th Nov ’08 at 21:07pm

Most of the comments I’ve read about blurry text in Safari OS X have come from people switching from Windows. No doubt like me they grew up with XP and its standard of aliased text, so it’s no surprise that they’d prefer that over proper (well, the best we have at the moment) rendering. At least until they get used it.

Which possibly explains why MS is so lost on the subject at the moment. They want to do better (I hope) but are stuck between advancement and satisfying their existing user base.

6. By Jon 陳 on 6th Nov ’08 at 21:52pm

That’s a good idea, Johno, thanks for suggesting it. Let’s hope so!

Ian, thanks for sharing the Ubuntu experience – I’d be very interesting in a screenshop of the sample from a default install with no tweaks if you have access to one? Rasterising is really in the hands of the rendering engine developers, and the pixel density / resolution available to users. I’m not even sure I’d want granular control over anyone’s personal type rendering settings (although that could be a solution) because it would be analogous with forcing full screen browsing. I.e. Interfering with setting that belong to the audience. Plus, who wants the work across multiple OS? :)

Ben, I think you’re right. Often there are other factors at play as well such as the fact that rasterising affects the whole OS experience, not just the Web. Perhaps there are technical trades going on I’m just not aware of, as well as the expectations of existing users as you point out.

7. By miha on 6th Nov ’08 at 22:19pm

Very interesting post!

However, the whole thing may be more complicated than you think, when precisely observing images of type in browsers. This is because of color profiles.

For example, this PNG image on Flickr. Made on Mac and has its color profile. Problem is, almost all browsers display images as they were in default Windows color profile – including FF3 with default settings (but not Safari). So, in most browsers type in this image looks just a little bit darker and blurrier – it looks wrong, this is not what Mac users see. You can save image on disk and open it with Photoshop and compare.

And this is also what happens in Safari for Windows; they ported every little detail, even type rendering engine. But how unfortunately, color profiles don’t match and text is rendered differently, just a little bit darker and blurrier. This really happens, I compared images from Safari on Mac and on Windows. I think this adds to complaints that text in Safari for Windows looks "blurry". This is why I don’t want to use it, although I prefer Mac rendering… I am stuck with that CT rendering, ugly for bigger type!

8. By Philippe on 7th Nov ’08 at 00:46am

Nitpicking if it is allowed…: Gecko1.9.x Mac (Firefox3+) does use ATSUI for text rendering.

I’ll disagree that Gecko Mac displays 'fatter' or 'bolder' than WebKit/Safari. I have uploaded a screenshot from the 'H' in the Arial headline. I used Pixie, enlarged at 800% (WebKit on the left).

Tested on an iMac, both browsers at their default settings.

9. By Jon 陳 on 7th Nov ’08 at 10:02am

Miha, colour profiles is a good point. I have a feeling you may be right. Do you have any reading or evidence you’ve found that you could share? It would be interesting to find out more.

Hi Philippe, please, nitpick away. :) To my eyes, there are definite differences. Firefox 3 / Gecko 1.9 has improved text rendering over its predecessors, but doesn’t it use Cairo as its rendering engine? Doesn’t Cairo uses Quartz as part of Core Graphics and ATSUI but the actual rendering engine is different? I’d be very interested to find out precisely how, or hear from any Cairo or Mozilla devs about how the integration actually works to render text.

I still find Safari 3 / Webkit 3 more attractive, even just looking at the tracking and perceived overall weight in the brief samples. Observing where line wraps occur body copy always leaves me with the distinct impression that Firefox renders type with tighter tracking by default.

10. By Oli on 7th Nov ’08 at 11:34am

Really good post as always.

I’m using Firefox 3.0 on XP and the type looks much better than in IE7 and 6. I just like to see a nice and clear looking type and that’s one reason why I use Firefox.

11. By miha on 7th Nov ’08 at 13:30pm

This site explains color profiles on web, and there is also a link to the example.

I’ve also made a screenshot of FF and Safari (both on Windows) of your image with Fontin Regular. I uploaded it here. Well, there is just a tiny difference, but whole typography is made with thousands of details :-P The image itself is saved for web and will be displayed correctly in all browsers.

12. By chemic on 7th Nov ’08 at 14:29pm

conclusion – all looks better in osx than windows.

Next time M$ comes out with "new" thing stolen from Apple, they should steal font rendering.

13. By Gustavo Ferreira on 8th Nov ’08 at 06:36am

strange, i would expect perceivable difference between the two cleartype samples at this size (vista sample should be smoother). but actually it makes sense that both look (almost) the same, since arial (and verdana, and georgia) were not hinted for cleartype.

it would be great if you could repeat your tests using one of the fonts from the cleartype collection (may i suggest calibri?) – otherwise we’re not being entirely fair to microsoft typography.

14. By Jon 陳 on 8th Nov ’08 at 13:56pm

Thanks Miha the SmugMug article was a fascinating read, as was a related Apple article that recommends changing the gamma for photographers or folks working on the Web.

Gustavo, thanks for making the point about system-specific hinting. Testing a ClearType collection font is a good suggestion, I may consider it. However, I would argue that because web designers most often use the Core Web Fonts for consistency across platforms they should be rendered well. Imagine how many people see Arial, Verdana or Georgia every day. If the problem is with the font rather than the rendering engine, then the fonts need better curation, and should be improved and expanded — especially if they are being left behind by advances in text rendering.

15. By Gustavo Ferreira on 8th Nov ’08 at 18:55pm

jon, i understand your point.

my point is, you are not showing cleartype 2 at its best. core web fonts are old; the new cleartype fonts are the only ones which use the full power of the new cleartype rasterizer.

please take a look at the big samples posted by john hudson on 6 april 2005 on this thread on typophile. do you see the difference?

not everyone has the ct fonts installed (i don’t), but for people using vista they are a better choice than arial. web-designers can specify “calibri, arial, sans-serif”.

what’s more important: to have the same font in all plattforms, or to have the best rasterization possible in each plattform?

16. By Brian Smith on 9th Nov ’08 at 18:02pm

Apple’s anti-aliasing is optimized for WSYIWYG printing first and maybe prettiness second. ClearType is optimized for legibility on screen over WYSIWYG and prettiness. I’ve never seen any study that indicates that Apple’s AA or any other AA technology makes reading easier and/or faster than ClearType. If ATSUI’s rendering was really easier/faster for reading then why wouldn’t the ClearType team (which has done extensive A-B testing of rendering techniques) adopt it?

For me, the aesthetic problems with ClearType are hard to spot unless I am closly looking for those problems. Yet, the blurriness inherent in the ATSUI rendering bothers me every time I try to use Safari on Windows. In other words, my experience is the opposite of yours.

Maybe this difference in opinion is due to differences in screens. What kinds of screens have you done this comparison on? Even the newest Apple Cinema displays are 100 DPI or less. The typical screen on a Windows laptop is over 120 DPI. My laptop is 133 DPI, and I think that is what makes the "jaggies" a lot less noticeable. If ATSUI is optimized for the low-DPI screens that are typically used by Mac-based designers, then it isn’t surprising that you designers would prefer the aesthetics of ATSUI over ClearType, even if ClearType was clearer on the vast majority of end-user screens (laptops running Windows).

However, good designers don’t optimize for themselves, they optimize the end users’ experience. By far the most common end-user configuration next year will be a PC running Windows with a LCD screen 100-144DPI running IE7. In other words, the most common configuration has the conditions that ClearType was optimized for, and ClearType will be in use (since IE7 uses it by default). It makes sense to primarily test and optimize for Windows+IE7+ClearType machines with small, high-DPI LCD screens--basically, the opposite configuration from what designers use themselves.

17. By Adam on 10th Nov ’08 at 12:27pm

Not tried it yet but this looks like a good alternative, javascript text replacement

18. By Chris Hester on 19th Nov ’08 at 14:36pm

Sadly, even with IE7 installed, I am seeing drive images applied to new computers that a) turn off XP’s default look and b) leave ClearType turned off. This is from two major universities in the UK, so I imagine others will do the same. The machines are running with LCD monitors and so it is a shame that the text will always look pixellated rather than smooth, as the user is not likely to know about ClearType.

Also, I have come across people who prefer Windows without any font smoothing at all. I think XP does a great job there with ClearType, so I am glad to see it on by default and improved in Vista. But it is not for everyone.

Lastly, Safari on Windows offers different levels of font smoothing. If you find it too bold you can always adjust it.

19. By Jordan Bradford on 17th Dec ’08 at 16:51pm

You should test the new Vista fonts (Calibri, Cambria, Candara, Consolas, Constantina, Corbel) because they were designed with sub-pixel font rendering in mind. You can get Mac versions of them from Office 2008 or the Office Compatibility Pack.

20. By Alex on 22nd Dec ’08 at 06:02am

Firefox uses Cairo for drawing and ATSUI for text rendering (Safari doesn’t use ATSUI for text rendering unless it’s a language that requires complex shaping). That’s why you’ll see some differences, compare Firefox to TextEdit and it should be a 1:1 match.

Cairo is pretty much just an API layer over Quartz, it provides a common API and rendering output across platforms, but still uses the native platform API where possible (and since Quartz is a very good API, Cairo can use Qurtz entirely and never do fallbacks)

Regarding ClearType, it looks good as long as the font and rendering output is within certain limits, go outside those limits and it breaks down (Give it a font with postscript outlines, or make it render too large, or render too small, etc.), MS fixed all these issues with the WPF font renderer, but haven’t touched the GDI renderer.

21. By Jon 陳 on 22nd Dec ’08 at 10:03am

Thanks for the extra detail, Alex. I’d love to find out more from you about the technical rendering process. Any references you can provide would be very much appreciated.

Update: After speaking off the record with someone from Microsoft, it seems that the Windows graphics system used in Windows, GDI, does not support smoothing at larger sizes, when we use ClearType. The reason we still see ‘jaggies’ at larger sizes is that many applications still use this legacy GDI rendering, including IE.

WPF (Windows Presentation Foundation) which ships as part of Vista supports smoothing for display sizes, as well as having support for OpenType Features. The Silverlight-based New York Times Reader uses WPF.

The next generation Graphics system has smoothing built-in. There’s a long but fascinating presentation from Microsoft’s Professional Developers Conference, 2008 by Kam VedBrat, which provides a lot of detail.

Growing OmniTI — Sun, 21st Dec 2008 {21}

’Twas the week before Christmas, and all was hectic in the…

PHP Advent Seasoning — Tue, 16th Dec 2008 {5}

Ladies and gentlefolk, I give you the two-thousand and eight PHP Advent…