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?

26 Comments

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. 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. 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. By Jon 陳 on 25th Nov ’07 at 13:25pm

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

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. By Joseph Lee on 3rd Dec ’07 at 13:53pm

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

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. 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. 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. 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. 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. 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. 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. By Jon 陳 on 22nd Jan ’08 at 05:57am

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

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. 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. 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. 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. 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. 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. 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. By Hadret on 5th Feb ’09 at 04:08am

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

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

Thumbs up on the css styled logo.

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. By Charlie on 7th Feb ’10 at 06:16am

Nice CSS and Logo. Thanks and compliments

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

dude, awesome type. rock on.

Lately in the Log

Anakin — Tue, 26th Jun 2012 {4}

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

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…

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

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

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…

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

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

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

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,…

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

Thanks

By Martins in Typeface != Font:

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

By DarkStar in Smoothing out the Creases in Web Fonts:

I agree with Leicester that table is great!

By Martin Varesio in Ampersand, the Aftermath:

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

By Steve Blakeborough in Display Type & the Raster Wars:

Hi Jon, In Elliot’s recent and informative article http://bit.ly/13sAS5X he suggested you might be bullied…

Footnotes

This simple dish was created with a little xHTML, a dash of CSS and a pinch of PHP. It’s garnished with hAtom, hCalendar, XFN, hCard and rel-tag with a large slice of accessible intent. Hopefully it plays nicely, all the time.

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. 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. 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. By Jon 陳 on 25th Nov ’07 at 13:25pm

Thanks Elliot. The dot is one of my favourite bits. :)
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. By Joseph Lee on 3rd Dec ’07 at 13:53pm

Wow, the logo is beautiful, it makes me giddy, lovely css.
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. 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. 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. 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. 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. 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. 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. By Jon 陳 on 22nd Jan ’08 at 05:57am

Thanks Brigitte, woody and Leland. Much appreciated. :) Congratulations Jenny; enjoy the Macbook!
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. 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. 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. 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. 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. 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. 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. By Hadret on 5th Feb ’09 at 04:08am

Looking good on Linux as well - ImageShack. Great idea! (:
23. By 7 on 28th Jun ’09 at 23:25pm

Thumbs up on the css styled logo.
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. By Charlie on 7th Feb ’10 at 06:16am

Nice CSS and Logo. Thanks and compliments
26. By Emcee Hao on 2nd Mar ’10 at 12:25pm

dude, awesome type. rock on.

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,…
By George in Copywriting, Experience Design, Daleks & Julio:

Thanks
By Martins in Typeface != Font:

Great post Jon, I stumbled across it by chance on Google..!!
By DarkStar in Smoothing out the Creases in Web Fonts:

I agree with Leicester that table is great!
By Martin Varesio in Ampersand, the Aftermath:

His dry, droll, richly-flavoured delivery was a humorous counterpoint to some controversial asides…
By Steve Blakeborough in Display Type & the Raster Wars:

Hi Jon, In Elliot’s recent and informative article http://bit.ly/13sAS5X he suggested you might be bullied…