Browser anti-aliasing: do you design your comps using bitmapped text?
A while back, I wrote about how it irked me when web designers who use Helvetica and Lucida Grande for body text. Anti-aliased or not, those two type-faces do not look good at small sizes. Recently at Bridgeline, we had a debate on whether or not we should design our UI comps using anti-aliasing. We all agreed using a smooth setting looks better, but what do most Windows users see? Well it all lies in Microsoft’s ClearType setting, and the confusion around its default settings. As far as our corner of the office:
- On my XP machine, I saw smooth text in IE7 but not Firefox
- Coworker 1 (XP) saw smooth text in IE7 and Firefox
- Coworker 2 (XP) saw smooth text in IE7 and Firefox
- Coworker 3 (Vista) saw smooth text in both IE7 and Firefox
- Friend (not in office) with Vista saw smooth text in IE7 but not Firefox
What is ClearType?
ClearType, according to Microsoft is:
an unprecedented innovation in font display technology that dramatically improves font display resolution and marks a genuine breakthrough in screen readability.
Sounds great, but Apple had very similar technology in 1976 with their Apple II computer – so it ended up being a lot of overhype for something that had already been estalished. In a nutshell, ClearType is a type of subpixel rendering. Instead of filling a pixel with a solid color, ClearType takes advantage of 3 sub-pixels within each pixel, and fills it with RGB values. So essentially you can think of an 800×600 monitor resolution as 2400×600. When rendering certain characters of a word that do not use all subpixels, ClearType will leave those su-pixels empty. My XP machine doesn’t any font-smoothing enabled, so the characters I see are jagged.
Notice that each pixel contains red, green, and blue subpixels.
So who has ClearType enabled by default?
- Users with Windows XP who purchase a new machine or perform a fresh install will not have ClearType enabled by default (Internet Explorer 7 and Microsoft Office 2007 will use ClearType)
- Users with Windows Vista who purchase a new machine or perform a fresh install will have ClearType enabled, but if they purchase the machine from a manufacturer, they may choose to disable this feature – most likely to save on processing bandwidth.
- Either of these might be blown to shit by an IT worker who may have good reasons to choose one or the other
Sources and further reading
Wikipedia – ClearType
Why Do My Windows Vista Fonts Look Horrible?
Dan Peters has this to say:
4/27/2009
Great article Marcel, we’ve also had similar discussions around which to include in design comps. Where did you guys end up?
Marcel has this to say:
4/27/2009
We haven’t discussed it yet, but I think we’ll go anti-aliased. It looks better and more people will ultimately be going that route.
Fred has this to say:
4/27/2009
I *always* smooth my fonts. The same way others believe that you no longer have to support IE6, it’s time to move forward.
My goal is to show your design in the best way possible. If you’re going to hold back your machine with pixelated fonts, things will still render and be readable (especially due to my love of large fonts), but everything will probably look — well — chunky.
Marc has this to say:
4/27/2009
I design comps with anti-aliased fonts as well. I’m a bit of a ’screw old habits/methods/technology’ guy, which bites me in the butt sometimes, but this is one I stick with.
Forrest Frazier has this to say:
4/27/2009
The crux of your argument lies at “those two type-faces do not look good at small sizes” and I couldn’t agree more. That is why I am trying to get away from using small type on sites. I know I’m bucking the trend but it’s time for everyone to be able to easily read content regardless of the font chosen (assuming its a readable font in the first place).