When an elusive penny drops, it’s always a good moment. Earlier today, I was thinking about the complex type rendering problem of a few days back. Skim that post, before you carry on and things will make much more sense.
Suddenly, I realised what the solution was, and fixed the IE7 CSS problem in 5 minutes: After giving every element some padding and an invisible border—effectively forcing IE to recognise the element dimensions—it now renders the glyphs properly and doesn’t cut off loops or terminals that are outside the conventional em. Tinkering afterwards took another two hours but now the homepage has a new type
experiment for the masthead!
So that’s the CSS sorted. I bumped into a IE7 problem with Eric Meyer’s unitless line heights along the way too, but that needs more research.
Unfortunately, the ClearType anti-aliasing problem is out of my control. We simply can’t tell Windows to not use it, or to do it better. That’s up to users themselves, or Microsoft. So, for anyone looking at this site using Vista with ClearType enabled, here’s what you're missing:
Fig 1. OS X/Safari 2 screenshot of the masthead.
For those of you lucky enough to be viewing using a Mac, or Safari on Windows, here’s what you're not missing:
Fig 2. Parallels/Vista/IE7 screenshot of the masthead.
The difference is stark. Even Windows standard rendering smooths large-sized text better than this.
Fig 3. Parallels/Vista/IE7 with ClearType switched for standard rendering.
ClearType seems to get worse as the font size increases. It sounds impossible that ClearType could be so bad, but my copy of Vista is a virgin Vista Ultimate, running on Parallels. No settings have been changed at all, and the only software installed apart from standard applications are browsers and anti-virus.
So, there we have it, I predicted my own pedantry wouldn’t allow me to leave it be. With character predilections, as with rendering engines, knowing is only half the battle.
Let me know what you think of the masthead type. You might even see it completely differently to me with a similar configuration. I’d be very interested in seeing a screenshot. I've not tested it in IE6, so bear with me while I get around to that. Is it worth keeping, even with the absence of decent smoothing in IE7/Vista?