Fueling the debate about using aliased or anti-aliased text when creating design mockups.
Before Internet Explorer 7 and Windows Vista, web text on PCs looked significantly different than it did on Macs. That was because OS X has long employed an anti-aliasing engine, named Quartz, I believe, whereas Windows XP and all previous versions displayed pixelated, aliased text.
Microsoft added its own anti-alias engine, called ClearType starting with Windows XP, but it wasn't turned on by default so most users probably never enabled it either. With the release of IE7, though, ClearType was embedded into the browser and activated by default, although as a browser-only option, thus leaving the rest of the applications with their original aliased display. Windows Vista came with a newer and improved version of ClearType enabled system wide by default.
The result is that while some users are still viewing web pages in the old-fashioned aliased mode, more and more are now viewing them with some form of anti-aliasing turned on. There are considerable differences between these two forms of display, as you can see from the screenshot above, and even differences between the way ClearType and Quartz render regular type. This complicates things when it comes to creating all-around compatible, good looking web typography, as one would have to test it in at least 3 different situations: aliased, ClearType, Quartz. This is not a big deal, though, seeing how web pages should be tested in a variety of conditions anyway.
The issue I would like to discuss comes at an earlier level, when actually creating the designs in the graphic application of choice. Do you use aliased or anti-aliased text in your design mockups? And if you do use anti-aliased text, what method is the closest to the real thing? As if dealing with 2 different OS specific engines wasn't enough, each graphic application comes with its own set of anti-alias options as well.
At the moment of writing this, based on my website's statistics, almost 60% of my visitors use Windows XP or an older version. Your specific stats may vary. Around 20% of all visitors use the combination of XP and IE7 (which would still get ClearType enabled by default in their browser). What remains is roughly 40% of users that will have no type of anti-alias enabled. As time goes by I imagine this percent will keep declining.
Personally, I have always been using aliased text in my design mockups. Back in the days when ClearType wasn't even an option on Windows, that made perfect sense. Furthermore, Photoshop has always been fairly decent at rendering aliased text just the way a browser would, thus ensuring an accurate representation. I guess this also comes from being mainly a PC user. Those working mostly on a Mac probably used anti-aliased text more frequently.
However, as the percentages are shifting, I'm more and more considering switching my practices as well. In Photoshop, the closest representation of a real-world anti-alias effect seems to be the "Smooth" setting, but there are noticeable differences, especially when dealing with small size fonts.
Here's to hoping that Adobe will include additional settings that will better match the settings of various operating systems. In the meantime, I would definitely be interested in hearing how you approach this issue.
Sep15 08Stefan Balansays:
I started using anti-alias a few months before switching to Mac, after that I just kept on with it ... it just looks better to me, an so far none of my clients complained.
ps: waiting for more posts :)
Sep16 08Radusays:
This anti-aliasing business is quite a tricky one.
Because IE < 7 versions are still widely used, it’s really not an option to disregard their rendering completely. I recently had an issue with this when I was testing with IE6, but I did have ClearType turned on, and all was well. But a few days later I had complaints that the headlines look awful and, well, they did (I think that was a larger-sized Georgia type text).
Also, Firefox doesn’t anti-alias text either with ClearType off, so that adds up to quite a number of Windows visitors who will actually see your letters sharper-edged than you’d wish.
I agree that producing comps with anti-aliased text starts to seem a good idea at last, I’m just saying one shouldn’t forget to remember the misfortuned majority ;)
Oct02 08Fusiongtsays:
I personally think it’s easier to read the fonts when it’s simply aliased like how the older browsers render it. Maybe it’s just something I’m used to or maybe it’s just crisper and easier to read. I figure aliased fonts look more like something you’d read in a book or instruction manual, so our eyes are more used to it. I do think anti-aliased large fonts look better; I wish there was to tell a stylesheet that this h1 needs to be anti-aliased and the rest of the body fonts would just be aliased. :)
Oct06 08Bob Smithsays:
Very interesting and enlightening article. We too have been caught between anti-aliased and aliasing. As the majority of our customers still use Windows XP or previous, we struggle to decide which method to employ. I know our graphic designers preference will be anti-aliased, but they too understand that most of the target market will not see the design as intended.
Your approach by analysing logs is a good one. There is no clear answer here other than analyse and understand your target market.
We feel it will still be awhile before most end users will catch up with the latest methods. So keep on analysing!
Nice Forms is excellent, highly recommended. It is easy to use and configure. It has saved countless hours of work. Many many thanks ;-)
Oct06 08Adrian Lusays:
Ideally, I would like to see anti-alias everywhere. But from my experience using aliased text in mock-ups seems to be the best approach. I’ve had times while working for a design agency where we sent off mocks to the client which they promptly approved, but as we started developing the site they sent comments about the text being different. We were required to go into the mocks and change them to alias.
Also I find that when working with developers, they appreciate being able to easily differentiate what should be built as HTML and what should be built as graphics. Of course, there are some developers who have a background in graphics and know which is which even without the tell tail aliased text.
I think there are times where anti-alias is just fine, and others where you are better off using alias, even it is not as aesthetically pleasing, it may depend on client and the team one works with, unless you are a one man show, then by all means anti-alias away.
Great article!
Oct06 08Luciansays:
@Adrian Lu
Excellent points regarding client complains and working with other developers. The first one is actually one of the biggest reasons that’s keeping me from switching to anti-alias text without looking back.
Oct07 08Mosays:
nice article, but… call me stupid but sometimes alised looks better than anti-alised ;;) and it’s better with not so smart clients, that don’t understand the difference and thay want a clear type like the competitors have on the website, not a slightly blured one :))
Feb04 09anonyxenusays:
As I read your excellent post, I must inform you that I am using a PC, but neither with IE or ClearType; and thereof that your assumption is only partly right; for I do have anti alias enabled. All one must do is to turn it on in the system’s customize visual effects advanced tab, or the display’s properties effects (standard obv). The latter being the old classic way, available since Windows 95. You’re correct however that the majority doesn’t bothered with (or even know how to enable it); since it’s not on by default, and consequently assuming the worst would generally be right.
Aug08 09Charliesays:
Good article! I have some advice, though; due to the very small font-size used in the examples they are not particularly helpful. Since font anti-aliasing is not incredibly noticeable on very small fonts (like 8 pt and smaller) where anti-aliasing doesn’t change the font to a large degree, you may want to show larger fonts (like 12 pt and above) where anti-aliasing really does change the look, feel, and legibility of the font and inherently the way words and sentences are read on-screen.
Aug08 09Font Funsays:
When on printed paper, I prefer anti-aliased text. But for some reason, any form of font smoothing gives me a terrible headache when I try to read it off a monitor. It doesn’t matter if it’s CRT, LCD, or RGB LED - any anti-aliasing makes it tremendously painful to read.