Web Typography - Differences in Anti-aliasing
Though there has been a great deal of talk about typography on web design blogs recently, one area that hasn’t really received much attention is the differences in anti-aliasing fonts across different systems.
What is anti-aliasing?
Because computer displays are based on pixels and fonts are forced into that square grid, on-screen type tends to naturally look a bit blocky. Anti-aliasing technology blurs the font’s edges slightly, allowing it to look fuller and more closely match the appearance of the printed page.
Differences between systems
Besides the differences between systems that use anti-aliasing and those that don’t, there are also different styles of anti-aliasing depending on whether you are using a Mac or Windows system.
Windows anti-aliasing goes by the name of Cleartype. While it shipped with Windows XP, by default, Cleartype was disabled, despite the fact that research shows improvement in reading speed when it is turned on. (If you’re using XP, here are instructions for turning Cleartype on.) Fortunately, Vista comes with Cleartype turned on.
The Mac OS also has its own version of anti-aliasing. (Turned on by default.) However, as you can see from the Arial example above, it has slightly different results from Windows.
Why? Well the type rendering philosophies of the two operating systems are a bit different. Where the Mac aims at reproducing the font as faithfully as possible on-screen, Windows aims at producing the most screen-legible type possible. It does this by staying a bit closer to the original pixel grid.
(Personally, I prefer the Mac rendering, but a lot of other people disagree.)
What difference does it make?
The difference this makes to you is in the integrity and legibility of your designs. A site with typography that looks great on a Mac may look awful on a PC unless you take steps to correct it. One possible solution is to use fonts that are meant to be rendered on-screen. For instance, using Georgia instead of Times New Roman as your default serif font will increase legibility for those with Cleartype turned off.
Of course, the only way to know how your type looks under alternate conditions is to run a system comparison.
How to do system comparisons
On Windows
- View your site with Cleartype turned on and turned off. - Instructions here
- View your site in Safari for Windows. (It uses the same technology as the Mac.) - Download here
On Macs
- Run Windows in Parallels and view your site with Cleartype turned on and turned off. - Instructions here
Solutions
Unfortunately, at this point our ability to make type look good under all anti-aliasing conditions is limited. For now the best we can do to maximize typographic appearance on all platforms is to limit ourselves to fonts which were designed for on-screen use, such as Georgia, Verdana, and Arial.
However, CSS3 does include a proposal for a font-smooth property which would allow web designers fine-tuned control over font anti-aliasing. Not only would it allow us to turn anti-aliasing on or off for individual text elements, but it would also allow us to specify conditions under which to smooth or not. I’m looking forward to that!
Your experience
What about you? Have you run into trouble with font anti-aliasing on different systems? What solutions have you found?
Popularity: 31% [?]
If you're new here, you may want to subscribe to my RSS feed or subscribe via email. Thanks for visiting!
Hmm.. you really whet my apetite there with the post — I was reading it with a great anticipation of some novel concept or idea regarding this issue and so was dissapointed when the post ended so abruptly. Needless to say I was left somewhat underwhelmed — was really expecting more
It is however good that you at least put this issue on the table as it needs to be discussed at greater depth within the design community.
I prefer no anti aliasing, myself. I turn it off
@ John: Sorry about that! Upon rereading, I saw what you meant. So I went back and added the whole section under “Solutions.” It still seems a bit abrupt to me, but I think it’s much more informative. Thanks for the constructive criticism!
@ Aaron: Hehe. I’m an anti-aliasing evangelist.
Anytime I use an XP machine that still has the default setting, I turn Cleartype on. It has definitely improved my reading and reduced my eyestrain.
Looks like anti-aliasing was enabled in the first image, but only affecting the larger type?
Or maybe that isn’t considering as AA.
@ Eli: Anti-aliasing was off, but because the text is significantly larger in the headline, it is able to fit in the pixel grid without appearing very pixelated. If you take a close look at the H, you can see that it is perfectly squared off, unlike in the anti-aliased examples.
There is a tiny bit of blurring around some of the other letters, but that is due to image compression.
@Joshua There is a tiny bit of blurring around some of the other letters, but that is due to image compression.
The first sample does appear to have anti-aliasing on the upper (larger) text. I’m surprised image compression would produce results like this applying it to the upper text on all the right parts but none on the bottom text… also I think the images are PNG which provides lossless compression which I wouldn’t expect this would be the result of if it were compression / artifacting. Instead I would expect palette reduction or dithering which this image seems to be suffering neither - are you sure about the non anti-aliasing on this one? … I don’t mean to be a bugger. I just thought you might want to take another look in case it needs a correction.
It’s just a suggestion but would sIFR allow javascript and flash enabled browsers (no matter what operating system) render type consistently?
I really like Mac, but I prefer the Windows Anti-Aliasing.
I made the experience that bright bold text on darker background isn’t that readable on a Mac. Text with the Windows Anti-Aliasing is much more readable in my opinion.
A small part of me dies whenever I fire up IE6/7 to test the delicate typography I’ve lovingly slaved over for 16 hours on the Mac. My feeling - Cleartype should be enabled by default on Windows boxes. Clearer is better. Who wants to wipe their arse with sandpaper, anyway?
@ Jordan: After a bit more research I discovered that you are correct. (Sorry Eli!) I had Windows Standard anti-aliasing turned on, which doesn’t apply for smaller text, but kicks in at font sizes around 18px or larger (or on bold text).
The difference between Cleartype and Standard is that Cleartype uses subpixel anti-aliasing, while Standard works at pixel level. Consequently Cleartype gives a smoother appearance to typical body text, but the difference in larger text isn’t as noticeable. So where I said anti-aliasing above, just replace with “subpixel anti-aliasing” and it should be correct.
@ Adaptiv Media: Interesting question. While I don’t know for sure, I would think that the answer is yes, since I’m pretty sure that the Flash plugin renders text according to its own internal algorithms. Unfortunately, that’s probably only an appropriate fix for headings, not body text.
@ linzprod: I agree that Cleartype is a bit more readable onscreen. However, I value being able to see the shape of the font rendered closer to what the designer intended.
@ Nick Cernis: I know what you mean. Even though I work primarily in Windows, it is painful to have to look at my typography with Cleartype off. Fortunately, Vista does have Cleartype turned on by default, and XP is slowly marching toward the final resting place of Windows 98, 95, and 3.1.
Thanks for the info, Joshua — I had no idea that Vista had Cleartype on by default (I test under XP on VMWare Fusion). Definitely a saving grace!
The link to Safari for windows is broken… missing the “h” off http. Thanks for the post!
@ Nick: Goodbye to non-sub-pixel-anti-aliased text!
@ Jesse: Thanks for pointing that out. I’ve updated the link.
@ Everyone: I’m pretty sure that this is now my most corrected post ever. Thanks for holding me to a high standard of quality!
[…] Web Typography - Differences in Anti-aliasing Because computer displays are based on pixels and fonts are forced into that square grid, on-screen type tends to naturally look a bit blocky. Anti-aliasing technology blurs the font’s edges slightly… 10 SEO Rules for Designers Search Engine Optimisation (SEO) is a vital component of any website. As a web designer or blogger, it’s important you understand how SEO works. 45 Home Business Resources: Things and People That Help You Make Money In Your Underwear “What follows is a really long list. Like, really long. You might want to bookmark it and come back later if you’re working or something…” How Do They Do That? Nine Mind Blowing Flash Animations Whether you are new to flash or a seasoned professional, these sites will make you sit back in wonder… 10 Bad Habits of Designers Here is a list of some of the bad habits we as designers are faced with constantly and some suggestions on how to fix them… […]