Rendering Complex Type—Who’s got the Love?

The home page for this site was always temporary. After losing a year in distractions, work and prevarication I finally caved and whipped it together in a day so I could launch.

Earlier this week I needed a timeout between sprints of development on our latest project, so I started to play with an idea for the masthead: A celebration of Web font letterforms with a complex <h1>.

17/11/07: Updated in Complex Type: CSS Fix, ClearType Miss.

This is where I paused just before I started testing in other browsers:

I thought it was fun. I hadn’t yet locked all the distances to the pixel grid, and there was still more to do, but it seemed pretty close in Safari 2 as well.

Opera 9 also had it right. It also happens to be my favourite browser that I don’t use. If it had a stripped–down version with Chris Pederick’s Web Developer Toolbar you’d have to pay me not to set it as default, it’s core really is that good.

Then I fired up IE7 on Vista, running it in Parallels and viewing it on an Apple Cinema Screen. Big Mistake.

I can’t even begin to analyse the multiple problems with the rendering of my (albeit complex) type sample in IE7. From Vista’s ClearType jaggies to IE7’s CSS issues it’s simply carnage and a veritable type–crime; a smörgåsbord of bad rendering served with a mallet and a scowl.

OK, I confess, I despaired for a second, hence the wry rant. I guess I’m asking too much of the browser. Maybe. However, surely we should step out of the cosy confines of tried and trusted methods, and let the creative beastie loose in the privacy of our own websites? Hell, under the hood this is just POSH with a few superfluous <span>s thrown in and a bit of CSS.

In the very first line of the introduction to her fantastic book, Thinking With Type, Ellen Lupton writes:

The organisation of letters on a blank page—or screen—are the designer’s most basic challenge.

Perhaps that should apply to browsers too?

Some of you may have more insight into these problems, and approach them as an intellectual challenge. I’d be interested in seeing any evidence or suggestions you have.

In a previous article on core Web font rendering I’ve delved into the platform and agent differences, but this is more an emotional reaction. My heart says, “bollocks!” I know I’ll be drawn back to trying to find a way around the problems though, much in the same way as I was with the current logotype on the homepage. Until then, I leave you with the test page so you can hurt yourself with IE7 too, should you have the urge.