This is the archive of version one, made in 2006, launched in 2007, and active until 2012. It’s archived to preserve the original design and its content that was referenced in multiple posts, books and galleries. There’s a holding page before the new site arrives.

/ log / 8th Nov, 2007 /

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:

Fig 1: Screenshot from Firefox 2 / Mac OS X 10.4.10.

Jontangerine rendered with complex CSS in Firefox2

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.

Fig 2: Safari 2 / Mac OS X.

Jontangerine rendered with complex CSS in Safari 2

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.

Fig 3: Opera 9 / Mac OS X. Opera 9 is the only browser in the group to pass the Acid2 test.

Jontangerine rendered with complex CSS in Opera 9

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

Fig 4: IE7 / Windows Vista Ultimate.

Jontangerine rendered with complex CSS in IE7

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.

Thinking With Type by Ellen Lupton

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.


Browse More Articles


  1. 1. By TyzMedia on 8th Nov ’07 at 19:58pm

    Do you refuse to work with a reset.css stylesheet? I’m not sure it would be of any help, but if attaching one made it work, what the heck —hey?

    It just struck me this is sort of like the "Ministry of Silly Walks" : (for laughs).

    And well your type sample isn’t really all that difficult now is it?

    It’s just two duo-span’s followed by a single quintuplet-span, all of which use alternating fonts. I’m not sure but you might be able to obtain a government grant to develop your Silly fonts [tongue in cheek].

    Seriously it’s an impressive use of standard type CSS elements.

    Can’t wait to see more.

  2. 2. By ty2 on 9th Nov ’07 at 06:48am

    Hi Jon,

    About my other (above) quirky blog comment.

    I was playing the man behind the desk in the Silly walks skit, you probably know the one.

    I was typing something completely different from that, and that idea just kind of popped in my head. I hope it came out that way, that it was a just for fun comparison.

    The Spans idea you are working with just struck me as creative brilliance in CSS mechanics, of course you can just render the fonts in an image editor and be done with it, but what fun is that.

    The rendering issues I see are just the leading part of the J being chopped off and the bottom of the G. I’ve checked it on two different machines in IE6 and one in IE7, both on Windows XP, all pretty much the same.

    The snake path the eye travels to read the text is making me cross-eyed. It’s a left-brain intro to the right-brain concept, lol again.

  3. 3. By Steve Avery on 9th Nov ’07 at 08:18am

    Shesshh Jon… looks like there’s been a SPANner thrown in the works there…!


  4. 4. By Paris Vega on 21st May ’09 at 11:45am

    I’m glad someone out there hasn’t been completely mugged of their creativity by the accessibility police.

Comments for this entry are closed.

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {66}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {3}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {0}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {4}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By pixelangry in We, Who Are Web Designers:

    Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

  2. By George in Copywriting, Experience Design, Daleks & Julio:


  3. By Martins in Typeface != Font:

    Great post Jon, I stumbled across it by chance on Google..!!

  4. By DarkStar in Smoothing out the Creases in Web Fonts:

    I agree with Leicester that table is great!

  5. By Martin Varesio in Ampersand, the Aftermath:

    His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…

  6. By Steve Blakeborough in Display Type & the Raster Wars:

    Hi Jon, In Elliot’s recent and informative article he suggested you might be bullied…

Live the questions and one day grow into the answers.