John Smith's Blog

Ramblings (mostly) about technical stuff

Windows ClearType makes Droid Sans look worse

Posted by John Smith on
Zoomed examples of rendering of Droid Sans upper-case C in various browsers/operating systems, using the default type rendering

TypeKit have recently posted a piece about font rendering in various browsers/operating systems that has inspired me to investigate something I'd noticed recently.

This blog uses Droid Sans for the headings. On Linux and OS X, this looks fine, as does Windows XP. On my Windows 7 machine however, it looks pretty horrible - the tops and bottoms of Cs are particularly bad, really jagged.

To work out why, I did rendered some test HTML using a couple of different fonts on several browsers. Here's an example, showing (from left to right)

  1. Firefox 4 beta on Linux (Fedora 11)
  2. Safari on OSX
  3. IE9 on Windows 7
  4. Firefox 3.6.11 on Windows 7
  5. Firefox 3.6.11 on a MacBook running Windows XP via Boot Camp

Examples of Helvetica/Arial/sans-serif and Droid Sans in various browsers

The four lines of text are. in turn:

  1. Helvetica/Arial/sans-serif lower case
  2. Helvetica/Arial/sans-serif upper case
  3. Droid Sans lower case
  4. Droid Sans upper case

(There's no difference between IE9 beta and Firefox 3.6.11 on Windows 7 in the image above, that I can see, but apparently they should be using different rendering technologies.)

The root cause turns out to be the different font rendering technologies used in various versions of Windows:

  • XP defaults to "Standard", which is regular anti-aliasing, with options for ClearType (sub-pixel rendering) or no aliasing at all (the latter being really horrible to look at.)
  • Win7 gives a choice of ClearType being on or off. Turning it off seems to be the same as "Standard" in XP, although I'm not 100% certain on that
It's not an issue with sub-pixel rendering per se, as Mac OSX uses it - but it looks like OSX is much more subtle about how it does it.

Arial looks better in Win7 with ClearType on, as does the Windows "system" font, so I wonder whether there's an issue with hinting, and/or font designers tweaking fonts to best cater for the underlying font technology?

On other thing that might be worth mentioning, if you're playing with the font rendering in Windows, various browsers react differently when you change the settings:

Firefox, OperaChange takes effect instantly
Chrome/IronChange takes effect when page is refreshed
SafariChange takes effect when browser is restarted
IE9No change - you are stuck with ClearType/DirectWrite, whether you like it or not

About this blog

This blog (mostly) covers technology and software development.

Note: I've recently ported the content from my old blog hosted on Google App Engine using some custom code I wrote, to a static site built using Pelican. I've put in place various URL manipulation rules in the webserver config to try to support the old URLs, but it's likely that I've missed some (probably meta ones related to pagination or tagging), so apologies for any 404 errors that you get served.

RSS icon, courtesy of RSS feed for this blog

About the author

I'm a software developer who's worked with a variety of platforms and technologies over the past couple of decades, but for the past 7 or so years I've focussed on web development. Whilst I've always nominally been a "full-stack" developer, I feel more attachment to the back-end side of things.

I'm a web developer for a London-based equities exchange. I've worked at organizations such as News Corporation and Google and BATS Global Markets. Projects I've been involved in have been covered in outlets such as The Guardian, The Telegraph, the Financial Times, The Register and TechCrunch.

Twitter | LinkedIn | GitHub | My CV | Mail

Popular tags

Other sites I've built or been involved with


Most of these have changed quite a bit since my involvement in them...