/ 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.

Share

Browse More Articles

4 Comments

  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" :

    http://www.sillywalksgenerator.com/ (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.

Post a Comment

Required sections are marked § . Please remember, debate and courtesy are mutually inclusive.

Personal Details and Authentication
Comment

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 {67}

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

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

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

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

    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 {5}

    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 www.canadianseoagency.com in The Paragraph in Web Typography & Design:

    Yep, this would be arguably the best articles I’d ever gone through in the recent times. I do hear alot of…

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

    Thanks

  4. By Martins in Typeface != Font:

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

  5. By OddsRİng Giriş in Ides of March:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  6. By OddsRing Giriş in Ampersand, the Aftermath:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

People and XFN

Analog folks:

  1. Andrei Zmievski

  2. Chris Shiflett

  3. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

  1. Ben Ramsey

  2. Dan Mall

  3. Denna Jones

  4. Ed Finkler

  5. Elizabeth Naramore

  6. Elliot Jay Stocks

  7. John D. Boardley

  8. Helgi Þormar Þorbjörnsson

  9. Joe Leech

  10. Jos Buivenga

  11. Kester Limb

  12. Nicola Pressi

  13. Patrick H. Lauke

  14. Piotr Fedorczyk

  15. Richard Rutter

  16. Rick Hurst

  17. Sean Coates

  18. Simon Pascal Klein

  19. Terry Chay

Live the questions and one day grow into the answers.