Start Testing Your Designs With and Without ClearType
This guest post is by Deron Sizemore from Random Jabber, a keen designer who built the Sizcons you can see in the sidebar, and who recently started up his own CSS Gallery over at NiceStylesheet.
If you ask anyone who’s ever browsed the web using a Mac and a PC, they will probably tell you that websites render better on a Mac. The reason a Mac browser appears to render better than a PC browser is because of something called ClearType (font smoothing). A Mac has font smoothing enabled by default and a PC doesn’t.
What is ClearType?
ClearType means that text is anti-aliased. Anti-aliased simply means that colored pixels are added around each character making the font appear smoother. Without ClearType enabled, text will appear jagged, which is why a lot of people refer to text without anti-aliasing as “the jaggies.”
Notice the image above.
I’ve taken a couple of screenshots from my blog. The one on the left is with ClearType enabled and the one on the right is with it disabled. Which one looks better?
The majority of people will tell you that the left screenshot looks better because it resembles how a Mac would render the site. However, there are a few that will tell you that the one on the right looks better and that the one with ClearType enabled looks “blurry.” I agree that it does look blurry if you’re used to ClearType being disabled, but once your eyes adjust to the change, I think you’ll agree that ClearType is the way to go.
For a better idea of what’s going on, you can check out the two “D’s” I have enlarged in the image above. In the “D” on the left, you can see the extra pixels added around the character.
Blame it on Microsoft
In Microsoft Windows XP, by default, ClearType is disabled. We all know there is a large number of Windows XP users out there. Because it’s disabled by default, a huge number of PC users have no idea that such thing as ClearType even exsists. Microsoft has since fixed their mistake and enabled ClearType by default with Windows Vista.
If You’re Not Testing With and Without ClearType, You Should
If you’re a designer and you haven’t started testing your designs with ClearType both disabled and enabled, you should start. I think you’ll be in for a big surprise when you see how differently it renders.
The big thing here is if you currently test with ClearType enabled, but rarely test with it disabled. Your designs will likely look worse with it disabled. That’s why it’s good to test in both to ensure that your design doesn’t look to grotesque with ClearType disabled because that’s how a lot of your visitors will see your site.
I’ve noticed that some fonts do look decent in both. Arial for instance looks decent with ClearType enabled or disabled, but Verdana doesn’t. Verdana looks much better with ClearType enabled than it does with it disabled. I’ve also noticed that for headings, using slightly larger font sizes than normal will make text appear to be not so jagged.
Unfortunately for you Mac users out there, the only way I know of to test what your design looks like without font smoothing is to actually jump onto a PC and test it there. I’ve searched and asked around to some of my Mac using friends and have yet to find a way to turn font smoothing off on a Mac. So, if anyone knows, I’d love for you to let me know.
Here’s How You Enabled ClearType
On the Windows XP desktop, right click >> select properties >> appearance >> effects >> choose ClearType for the method to smooth edges.
So, if you haven’t been testing your designs with ClearType enabled as well as disabled, start now. Your site won’t ever look as good with ClearType disabled, but with a little testing it can look presentable.
Thank you for the information. I never know ClearType existed.
That’s yet another reason why I’m a Mac user…
Good post Deron!
Love your blog!
Long live Macs!
No problem Stuart - thank Deron for a great guest post.
@ Brian - lol - haha. I’m a bit of a Windows fanboy myself unfortunately, but I’ve never really given Macs a go - will have to get round to using one at some point. Cheers for the comment.
Deron,
Thanks for a simple explanation of the subject. The icons on the sidebar look nice, this is the first time I noticed the change.
Very Interesting, I had never heard of this before today. I guess you learn something new everyday.
It has been a while since you posted to your site. I was wondering if you had decided not to post on this site anymore.
I use PC I think that I will look into this a little more. Great post!
Thanks everyone for the feedback on the post. I hope I was able to help a few people out there who maybe previously didn’t know about this setting.
Thank you Adnan for giving me the opportunity to write my first guest post!
Great post, good info. A lot of people overlook this ClearType issue.
Deron, Thank-you so much. I never knew about clear type. But I kept prefering the way my blog looked in IE 7, compared to Firefox. I suspect maybe IE7 has clear type enabled. Tricky Microsoft, but now that I’ve enable clear type, my blog looks great in Firefox too. Now I can switch to Firefox, thanks for the great information. Emma.
@ Adnan Good luck with the sell of your blog and future ventures.
An important footnote is that Mac OS X uses an entirely different technology to render typography. Even with ClearType enabled on Windows, typography will look heavier and more natural on Mac OS X.
Trademark: Yep, you’re right. A lot of people overlook this feature when testing designs.
Emma: Glad you liked the article. Yeah, IE7 gives you the option to turn on ClearType the first time you use it. It’s really amazing how much better your designs looks with it turned on, but there are those out there that do prefer it off.
I’ve tried cleartype on 5 different monitors (laptops, big LCDs and CRTs) and it invariably looks terrible, especially with those horrible new Vista fonts like Calibri and Cambria. It gives me a really bad headache, and I can’t be the only one.
IMHO the most readable font on-screen is non-smoothed Verdana at fairly small sizes.
I dare anybody to show the 2 screen grabs above and take a poll of the general public. Nearly everybody will tell you WITHOUT cleartype looks better, crisper, sharper and is easier to read.
Apple and MS tell people their new font rendering looks better because theyve spent time and money on it. Some people believe it looks better because theyve been told it does.
This is why the article ADMITS without cleartype looks better to anybody looking, but “let your eyes adjust” ie let your mind be fooled…