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.

30 Comments

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

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 08:19am

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 09:35am

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 12: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 13: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 13: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 14: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 6th Nov ’08 at 16:46pm

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 02: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 03: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 05:30am

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 06:29am

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 7th Nov ’08 at 22:36pm

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 05:56am

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 10:55am

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 10:02am

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 04:27am

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

18. By Chris Hester on 19th Nov ’08 at 06:36am

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 08:51am

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 21st Dec ’08 at 22:02pm

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 02: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.

22. By Anon on 28th Jan ’09 at 07:20am

Another great post. You know what would be really cool though, is if there was a way to automatically make images from your text, and have them as background images, instead of having to create them manually, or use SIFR.

23. By Martin McNickle on 2nd Mar ’09 at 04:20am

Thought I should bring a bit of a Linux flavour to the discussion. Here is a screenshot of the Arial rendering in Ubuntu 8.04/Firefox 3beta2. It renders (IMO) quite nicely. It does render lighter than the OS X/FF, and the OS X rendering has tigher letterspacing too.

24. By Peter on 27th Mar ’09 at 16:04pm

For me, what bothers me with the ClearType rendering is the coloured fringing (visible in your captures above), which doesn’t appear (or is very unnoticeable) for smoothed text on OSX. This coloured fringing has been driving me barmy, but there appears to be no way to prevent it - so I have disabled font smoothing for the time being. This is on XP so maybe Vista is better.

25. By Paul on 19th May ’09 at 08:31am

I know what you mean about ClearType coloured fringing. I have a pc laptop running Vista with a native resolution of (1920x1200) pixels. Type looks terrible on it! I can see the red and green fringing on all the type. It drives me crazy. Furthermore, type is so small in my browsers due to the high screen resolution, I set all my fonts to scale, which just seems to make the colour fringing worse.

It’s part of why my next purchase will be a mac.

26. By Jordan Bradford on 19th May ’09 at 08:52am

Windows 7 has a new tool called ClearType Text Tuner. It presents a series of text samples from which you pick the best-looking one in each step. Here’s a video demonstration.

The tool fixed the color fringing I was seeing on my 1920x1200 monitor.

For Windows XP and Vista, you can use an online version or a downloadable PowerToy version (XP only) of the tool.

It also helps to have the correct monitor driver/color profile installed. Sometimes the driver Windows chooses automatically is better than the manufacturer’s, and sometimes it isn’t.

27. By Bruce on 20th Nov ’09 at 08:21am

Jon, for testing websites, I have an OEM copy of Windows XP. (You can get one online if you buy a motherboard, processor, and hard drive. Apparently that makes you a “computer manufacturer.") This will allow you to install and activate the same copy of Windows as many times as needed. I use three instances of Windows in a VirtualBox VM. One for IE 6, 7, and 8, respectively.

I don’t know if VirtualBox runs on OS X, but Apple does ship a virtual manager that would work as well.

28. By Dave F on 8th Dec ’10 at 15:34pm

I feel slightly out of my depth commenting on such an authoritative piece, but the only thing this post is missing is the inclusion of in-line font examples embedded in the HTML next to those images of different browser treatments. It would be interesting to directly compare your examples with real time rendering on the browser versions in use today (late 2010).

29. By Sam Orchard on 3rd May ’11 at 15:31pm

On a similar note, I’ve noticed that a lot of custom fonts imported using the @font-face method suffer from jagged edges when they start approaching 26px in size.

This is evident in pretty much every browser - even webkit based browsers like Chrome and Safari. One method I’ve started using which goes somewhat to resolving it, is adding a slight text-shadow which has the same (or similar) colour as the background. This gives a slight blur to the edges of the font.

There’s a filter which helps in IE too, but unfortunately, it’s not valid CSS - it does make the text look a LOT better, though.

30. By Steve Blakeborough on 7th May ’13 at 09:04am

Hi Jon,

In Elliot’s recent and informative article http://bit.ly/13sAS5X he suggested you might be bullied into updating this post - beyond answering our comments of course ;-)

Any news?

Lately in the Log

Anakin — Tue, 26th Jun 2012 {4}

I’m pleased to be able to say that Analog is joining forces with…

We, Who Are Web Designers — Mon, 19th Sep 2011 {66}

In 2003, my wife Lowri and I went to a christening party. We were friends…

Ampersand, the Aftermath — Wed, 22nd Jun 2011 {3}

The first Ampersand web typography conference took place in Brighton last…

Design Festival, The Setup, and Upcoming Posts — Mon, 20th Jun 2011 {0}

Wow, this has been a busy period. I’m just back from the Ampersand…

Web Design as Narrative Architecture — Wed, 30th Mar 2011 {12}

Stories are everywhere. When they don’t exist we make up the…

Ides of March — Tue, 15th Mar 2011 {4}

My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

By pixelangry in We, Who Are Web Designers:

Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

By George in Copywriting, Experience Design, Daleks & Julio:

Thanks

By Martins in Typeface != Font:

Great post Jon, I stumbled across it by chance on Google..!!

By DarkStar in Smoothing out the Creases in Web Fonts:

I agree with Leicester that table is great!

By Martin Varesio in Ampersand, the Aftermath:

His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…

By Steve Blakeborough in Display Type & the Raster Wars:

Hi Jon, In Elliot’s recent and informative article http://bit.ly/13sAS5X he suggested you might be bullied…

Footnotes

This simple dish was created with a little xHTML, a dash of CSS and a pinch of PHP. It’s garnished with hAtom, hCalendar, XFN, hCard and rel-tag with a large slice of accessible intent. Hopefully it plays nicely, all the time.

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

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 08:19am

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 09:35am

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 12: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 13: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 13: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 14: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 6th Nov ’08 at 16:46pm

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 02: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 03: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 05:30am

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 06:29am

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 7th Nov ’08 at 22:36pm

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 05:56am

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 10:55am

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 10:02am

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 04:27am

Not tried it yet but this looks like a good alternative, javascript text replacement
18. By Chris Hester on 19th Nov ’08 at 06:36am

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 08:51am

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 21st Dec ’08 at 22:02pm

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 02: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.
22. By Anon on 28th Jan ’09 at 07:20am

Another great post. You know what would be really cool though, is if there was a way to automatically make images from your text, and have them as background images, instead of having to create them manually, or use SIFR.
23. By Martin McNickle on 2nd Mar ’09 at 04:20am

Thought I should bring a bit of a Linux flavour to the discussion. Here is a screenshot of the Arial rendering in Ubuntu 8.04/Firefox 3beta2. It renders (IMO) quite nicely. It does render lighter than the OS X/FF, and the OS X rendering has tigher letterspacing too.
24. By Peter on 27th Mar ’09 at 16:04pm

For me, what bothers me with the ClearType rendering is the coloured fringing (visible in your captures above), which doesn’t appear (or is very unnoticeable) for smoothed text on OSX. This coloured fringing has been driving me barmy, but there appears to be no way to prevent it - so I have disabled font smoothing for the time being. This is on XP so maybe Vista is better.
25. By Paul on 19th May ’09 at 08:31am

I know what you mean about ClearType coloured fringing. I have a pc laptop running Vista with a native resolution of (1920x1200) pixels. Type looks terrible on it! I can see the red and green fringing on all the type. It drives me crazy. Furthermore, type is so small in my browsers due to the high screen resolution, I set all my fonts to scale, which just seems to make the colour fringing worse.

It’s part of why my next purchase will be a mac.
26. By Jordan Bradford on 19th May ’09 at 08:52am

Windows 7 has a new tool called ClearType Text Tuner. It presents a series of text samples from which you pick the best-looking one in each step. Here’s a video demonstration.

The tool fixed the color fringing I was seeing on my 1920x1200 monitor.

For Windows XP and Vista, you can use an online version or a downloadable PowerToy version (XP only) of the tool.

It also helps to have the correct monitor driver/color profile installed. Sometimes the driver Windows chooses automatically is better than the manufacturer’s, and sometimes it isn’t.
27. By Bruce on 20th Nov ’09 at 08:21am

Jon, for testing websites, I have an OEM copy of Windows XP. (You can get one online if you buy a motherboard, processor, and hard drive. Apparently that makes you a “computer manufacturer.") This will allow you to install and activate the same copy of Windows as many times as needed. I use three instances of Windows in a VirtualBox VM. One for IE 6, 7, and 8, respectively.

I don’t know if VirtualBox runs on OS X, but Apple does ship a virtual manager that would work as well.
28. By Dave F on 8th Dec ’10 at 15:34pm

I feel slightly out of my depth commenting on such an authoritative piece, but the only thing this post is missing is the inclusion of in-line font examples embedded in the HTML next to those images of different browser treatments. It would be interesting to directly compare your examples with real time rendering on the browser versions in use today (late 2010).
29. By Sam Orchard on 3rd May ’11 at 15:31pm

On a similar note, I’ve noticed that a lot of custom fonts imported using the @font-face method suffer from jagged edges when they start approaching 26px in size.

This is evident in pretty much every browser - even webkit based browsers like Chrome and Safari. One method I’ve started using which goes somewhat to resolving it, is adding a slight text-shadow which has the same (or similar) colour as the background. This gives a slight blur to the edges of the font.

There’s a filter which helps in IE too, but unfortunately, it’s not valid CSS - it does make the text look a LOT better, though.
30. By Steve Blakeborough on 7th May ’13 at 09:04am

Hi Jon,

In Elliot’s recent and informative article http://bit.ly/13sAS5X he suggested you might be bullied into updating this post - beyond answering our comments of course ;-)

Any news?

By pixelangry in We, Who Are Web Designers:

Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…
By George in Copywriting, Experience Design, Daleks & Julio:

Thanks
By Martins in Typeface != Font:

Great post Jon, I stumbled across it by chance on Google..!!
By DarkStar in Smoothing out the Creases in Web Fonts:

I agree with Leicester that table is great!
By Martin Varesio in Ampersand, the Aftermath:

His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…
By Steve Blakeborough in Display Type & the Raster Wars:

Hi Jon, In Elliot’s recent and informative article http://bit.ly/13sAS5X he suggested you might be bullied…