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?

15 Comments

1. By Fernando Figoni on 18th Nov ’07 at 08: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 20: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 12:57pm

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 21:25pm

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

5. By Roger Gordon on 3rd Dec ’07 at 21: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 21:53pm

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

7. By Sey on 9th Dec ’07 at 17:05pm

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 10: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 11: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 21st Dec ’07 at 04:39am

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 30th Dec ’07 at 02:16am

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 20: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 23: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 13:57pm

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

15. By Manuel, Æstheticrew on 26th Mar ’08 at 04:49am

…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 :)

Lately in the Log

Typographers, lend me your pain — Fri, 2nd May 2008 {11}

Dear web typographers and designers, I need your help (and your woes!) A…

An Ephemeral Site: Denna Jones — Fri, 25th Apr 2008 {21}

Denna Jones is a designer, and we recently launched a site for her that is…

A Site for Sore Eyes: OmniTI — Thu, 24th Apr 2008 {7}

You may have seen the recent case study featuring the evolution of…

Naked in Tahiti (where’s Ms CSS?) — Wed, 9th Apr 2008 {8}

Naked again. Why, oh why every year do I feel the urge to cast off the…

Remarks from the log

By James Web in Naked in Tahiti (where’s Ms CSS?):

Whoever came up with CSS naked day, obviously had a lot of faith in their CSS-Free web-site. I notice that all people…

By Alan Pritt in A Site for Sore Eyes: OmniTI:

Regarding those raised initials: if they look like they may be an afterthought perhaps this is because the increase…

By Mike in Typographers, lend me your pain:

Hi Jon, Cheers for your answer. First of, maybe we don’t even need to bother, which would really a…

By cath in An Ephemeral Site: Denna Jones:

Hi Jon This seriously rocks – love it. I have a couple of questions if you don’t mind – how did you…

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 08: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 20: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 12:57pm

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 21:25pm

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

Wow, the logo is beautiful, it makes me giddy, lovely css.
7. By Sey on 9th Dec ’07 at 17:05pm

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 10: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 11: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 21st Dec ’07 at 04:39am

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 30th Dec ’07 at 02:16am

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 20: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 23: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 13:57pm

Thanks Brigitte, woody and Leland. Much appreciated. :) Congratulations Jenny; enjoy the Macbook!
15. By Manuel, Æstheticrew on 26th Mar ’08 at 04:49am

…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 :)

By James Web in Naked in Tahiti (where’s Ms CSS?):

Whoever came up with CSS naked day, obviously had a lot of faith in their CSS-Free web-site. I notice that all people…
By Alan Pritt in A Site for Sore Eyes: OmniTI:

Regarding those raised initials: if they look like they may be an afterthought perhaps this is because the increase…
By Mike in Typographers, lend me your pain:

Hi Jon, Cheers for your answer. First of, maybe we don’t even need to bother, which would really a…
By cath in An Ephemeral Site: Denna Jones:

Hi Jon This seriously rocks – love it. I have a couple of questions if you don’t mind – how did you…

Complex Type: CSS Fix, ClearType Miss

Share

15 Comments

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

2. By Jon 陳 on 18th Nov ’07 at 20:21pm

3. By Elliot Jay Stocks on 23rd Nov ’07 at 12:57pm

4. By Jon 陳 on 25th Nov ’07 at 21:25pm

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

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

7. By Sey on 9th Dec ’07 at 17:05pm

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

9. By Jon 陳 on 18th Dec ’07 at 11:38am

10. By Brigitte on 21st Dec ’07 at 04:39am

11. By woody_alien on 30th Dec ’07 at 02:16am

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

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

14. By Jon 陳 on 22nd Jan ’08 at 13:57pm

15. By Manuel, Æstheticrew on 26th Mar ’08 at 04:49am

Post a Comment

Lately in the Log

Typographers, lend me your pain — Fri, 2nd May 2008 {11}

An Ephemeral Site: Denna Jones — Fri, 25th Apr 2008 {21}

A Site for Sore Eyes: OmniTI — Thu, 24th Apr 2008 {7}

Naked in Tahiti (where’s Ms CSS?) — Wed, 9th Apr 2008 {8}

Remarks from the log

By James Web in Naked in Tahiti (where’s Ms CSS?):

By Alan Pritt in A Site for Sore Eyes: OmniTI:

By Mike in Typographers, lend me your pain:

By cath in An Ephemeral Site: Denna Jones:

Footnotes

Complex Type: CSS Fix, ClearType Miss

Share

15 Comments

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

2. By Jon 陳 on 18th Nov ’07 at 20:21pm

3. By Elliot Jay Stocks on 23rd Nov ’07 at 12:57pm

4. By Jon 陳 on 25th Nov ’07 at 21:25pm

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

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

7. By Sey on 9th Dec ’07 at 17:05pm

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

9. By Jon 陳 on 18th Dec ’07 at 11:38am

10. By Brigitte on 21st Dec ’07 at 04:39am

11. By woody_alien on 30th Dec ’07 at 02:16am

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

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

14. By Jon 陳 on 22nd Jan ’08 at 13:57pm

15. By Manuel, Æstheticrew on 26th Mar ’08 at 04:49am

Post a Comment

Lately in the Log

Typographers, lend me your pain — Fri, 2nd May 2008 {11}

An Ephemeral Site: Denna Jones — Fri, 25th Apr 2008 {21}

A Site for Sore Eyes: OmniTI — Thu, 24th Apr 2008 {7}

Naked in Tahiti (where’s Ms CSS?) — Wed, 9th Apr 2008 {8}

Remarks from the log

By James Web in Naked in Tahiti (where’s Ms CSS?):

By Alan Pritt in A Site for Sore Eyes: OmniTI:

By Mike in Typographers, lend me your pain:

By cath in An Ephemeral Site: Denna Jones:

People and XFN

Footnotes