/ log / 17th Nov, 2007 /

Complex Type: CSS Fix, ClearType Miss

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 type folly 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:

Safari screenshot

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:

IE7 screenshot

Fig 2. Parallels/Vista/IE7 screenshot of the masthead.

The difference is stark. Even Windows standard rendering smooths large-sized text better than this. Update: See for yourself:

Screenshot in IE7 using standard font rendering

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?

Share

Browse More Articles

26 Comments

  1. 1. By Fernando Figoni on 18th Nov ’07 at 00:49am

    I think your work it is not a “type folly” , but an example of what we could achieve using Css and Content only and so the path we have to tread on.

    I run Windows XP with Clear Type enabled and so I don’t experience he problem You have pointed out and can instead appreciate your work.

    What You have said about Vista can only strenghten my first impression and my decision not to upgrade and buy instead a Mac.

  2. Jon 陳’s profile 2. By Jon 陳 on 18th Nov ’07 at 12:21pm

    Grazie Fernando. I’m glad you get to see it right.

    Not sure if the anti-aliasing problem with ClearType and Vista is not somehow due to my configuration. ClearType relies on LCD sub-pixel rendering and grid fitting (as the previous article in this series mentioned) so it could just simply not work with my Apple cinema screen. Be interesting to find out if anyone else with Vista has made similar observations.

  3. 3. By Elliot Jay Stocks on 23rd Nov ’07 at 04:57am

    Excellent work, Jon. I love the new logo and I was amazed to discover it wasn’t a graphic! Type trickery aside, I think the simple orange dot is the piece de resistance: it adds a perfect bit of contrast and brings clarity to the chaos! :)

  4. Jon 陳’s profile 4. By Jon 陳 on 25th Nov ’07 at 13:25pm

    Thanks Elliot. The dot is one of my favourite bits. :)

  5. 5. By Roger Gordon on 3rd Dec ’07 at 13:44pm

    I liked the design of your site until I noticed that font thing. At that stage I really liked you site. When I saw that it was type, and not an image, I thought your site was the best thing I'd seen all week. Finally I noticed how perfectly everything scales when you change font sizes. Now I think your site is the best thing I've seen all month. For someone who looks at websites every day, almost all day, that is a big compliment!

    Congratulations! One day I'll make a site like this, too :p

  6. 6. By Joseph Lee on 3rd Dec ’07 at 13:53pm

    Wow, the logo is beautiful, it makes me giddy, lovely css.

  7. 7. By Sey on 9th Dec ’07 at 09:05am

    ClearType at large sizes always irritated me. Can’t really win here: lack of ClearType gives you crappy display at small sizes and decent at large, and CT for the vice-versa. I'd use Safari as my primary browser, but I still can’t let go of my Firefox extensions, so for the time being I use it for taking screenshots. ;[ (Stuck on a Vista Home Premium here. Such misleading name.)

  8. 8. By Simon on 18th Dec ’07 at 02:34am

    nice work, I like the logo and was amazed to see that I could select it.

    But I’m sorry that I am the one to say it doesn’t work in ie6, partly. (tested it with multiple ie). I think the positioning is right but you can see the (invisible) borders. The letters have a black border and the orange dot an orange one, so I’m guessing ie6 takes the font-color declared in the span. Apparently ie doesn’t understand transparent.

    maybe this helps, didn’t test it.

  9. Jon 陳’s profile 9. By Jon 陳 on 18th Dec ’07 at 03:38am

    Thanks for taking the time to test for me Simon. Much appreciated. It’s good to know the positioning is respected even if the borders are not. As I mentioned, I haven’t got around to testing in IE6 yet—time permitting I’ll get around to looking at the inevitable errors and fix them over the festive season.

  10. 10. By Brigitte on 20th Dec ’07 at 20:39pm

    Upon first coming to your site I really liked the design. Then I noticed it was type, and not an image and at that point I fell in love. It made me happy inside, and I started giggling. Classy, and gorgeous.

  11. 11. By woody_alien on 29th Dec ’07 at 18:16pm

    Some coments from the continent: Zufaellig bin ich auf Deine Seite gestossen – wegen des Hinweises auf den Film von 4hero. Gutes Design, exzellente Optik, und kreative Gedanken – Respekt!!!

    Michael

  12. 12. By Leland Clemmons on 5th Jan ’08 at 12:51pm

    Wow. Just shows how you can make great images without Photoshop! There’s a large movement to create things using purely CSS. Great idea, even better execution!

  13. 13. By Jenny on 19th Jan ’08 at 15:25pm

    What you did is AWESOME, really beautiful. Makes me wanna spend more time on learning even more about CSS.

    And you just proved that I made the right decision by NOT buying a new laptop with Vista. Since Monday I am the proud owner of my very first Macbook after ten years of working with Windows – and I am so happy :P

  14. Jon 陳’s profile 14. By Jon 陳 on 22nd Jan ’08 at 05:57am

    Thanks Brigitte, woody and Leland. Much appreciated. :) Congratulations Jenny; enjoy the Macbook!

  15. 15. By Manuel, Æstheticrew on 25th Mar ’08 at 21:49pm

    …Unfortunately, the ClearType anti-aliasing problem is out of my control. We simply can’t tell Windows to not use it…

    If it is not enabled as system wide setting you can disable it via CSS. At least for IE7. Read my article How to disable ClearType via CSS.

    Good looking site, Jon :)

  16. 16. By Sébastien on 19th Jun ’08 at 02:30am

    I cry not to know well to read English, because your articles are very interesting. You make very good job when it is a question of introducing work on the typo. Continuez !

  17. 17. By Kevin on 24th Jun ’08 at 04:21am

    really nice logo jon, it’s impressive what CSS can so compared with 6-7 years ago – maybe this is a peek at the future – CSS fonts?:

    http://www.cssplay.co.uk/menu/cssfont.html

    regards.

  18. 18. By James Leicester on 2nd Jul ’08 at 01:10am

    This is a problem that I have noticed too Jon, I still don’t understand why type rendering looks so bad even on the new vista?

  19. 19. By Edde on 5th Sep ’08 at 18:34pm

    Firefox 3 on a WinXP system makes your logo look like the IE7 version – even with Clear Type switched on. Safari does a way better job.

    But whatever the browsers make of it: this is ART

  20. 20. By Ferienwohnung Sizilien on 6th Oct ’08 at 10:34am

    Patrick got it right. Doug did use id for the CSS signature because of its higher specificity, and class for the different layouts.

  21. 21. By Alex McCabe on 23rd Jan ’09 at 21:40pm

    I’m impressed at what you have managed. I myself am new to all this. Unfortunately Windows 7 has the same ClearType problem as Vista. I am using FF3 as well. Maybe they will fix it when it’s fully released. Hope so.

    I see I am late to reply to this, maybe I should keep a better eye on yours website, as a quick browse through shows some decent stuff.

    On a small side-note, it was good talking to you at the Web Devlopers Convention in Bristol, way back in November.

  22. 22. By Hadret on 5th Feb ’09 at 04:08am

    Looking good on Linux as well - ImageShack. Great idea! (:

  23. 23. By 7 on 28th Jun ’09 at 23:25pm

    Thumbs up on the css styled logo.

  24. 24. By Daniel Genser on 5th Aug ’09 at 00:06am

    Just found your site today and wanted to compliment you on the gorgeous typography and design.

  25. 25. By Charlie on 7th Feb ’10 at 06:16am

    Nice CSS and Logo. Thanks and compliments

  26. 26. By Emcee Hao on 2nd Mar ’10 at 12:25pm

    dude, awesome type. rock on.

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

    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 Martins in Typeface != Font:

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

  2. 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…

  3. 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…

  4. By OddsRing Giriş in Design Festival, The Setup, and Upcoming Posts:

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

  5. By OddsRing Giriş in We, Who Are Web Designers:

    pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a printer could afford. ucuz…

  6. By Otomatik Rent A Car in Typeface != Font:

    each typeface has its own personality, appropriate to the message it has to convey suit the usual measurements of…

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.