Blogtrepreneur | Entrepreneur Blog

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.