athela blog

Flickr user: CorEnsute

So I’ve given this a quick google and I wasn’t able to find anything so forgive me if I’m covering something that’s already been covered by another.  Just a little intro: Hinting is the way the text is aligned to the pixel grid.  Sub-pixel rendering is the method used to anti-alias the edges of fonts.  Both kind of different technologies who’s distinction blurs where sub-pixel rendering has just taken over where hinting has left off.

I noticed today that the font hinting on Chrome is not as good as firefox’s with regard to text on transparent backgrounds.  Obviously this is all subjective and you may prefer the other but stick with me here.  If you look at the attached screenshot you can really see the extent of the problem.

During my quick google, I’ve seen a couple of posts on forums saying that Google Chrome and Firefox both use the same GDI renderer to render text so it must be the way chrome places the text on the transparent background.

Firefox on the left, Chrome on the right

The website I’m looking at there is: http://www.zurb.com/playground/css3-polaroids

OK, so I can kind of see that the text on Firefox is making much better use of sub-pixel hinting for the characters.  They’re very nicely laid out in the grid and at every pixel along each glyph’s lines is clear and defined.  Chrome on the other hand just looks fuzzy, faint and thin for a few characters.  This can be seen in the word ‘effect’ below the heading ‘Making them Scale’.  Specifically look at how the f’s are perfectly hinted (aligned to the pixel grid) but the e is not, and is much less prominent. If we look over to how Firefox renders the same word we see that it’s perfect and there is little blur or fuzziness in the other letters to complain of.

Let’s zoom in on the ‘s’.

Close up of firefox's rendering of the s. The colours are indicative that ClearType is being used.

Close up of Chrome's rendering of the 's'. An apparent lack of colour! What's happened to the sub-pixel rendering?

Wow, that’s pretty conclusive I say.  What’s up with Chrome not using ClearType?  Looks like it is using just font-smoothing. The middle of the s is also faint and not as defined as that in Firefox which indicates that the hinting is off.  Check out how much firefox takes in to account the RGB sub-pixels in the screen to place the s where it needs to go.  Chrome has too much of a fixation on getting the hinting exact to the pixel rather than the sub pixel.  This probably means that it is not as noticeable to use font-smoothing instead of cleartype.

Test System: Windows 7 64-bit, ATi 8.6 Drivers, Firefox3.6 Release, Chrome 4.0.302.3 Dev, 1650 × 1080

So over to you, which rendering technique do you prefer? Are there any solutions you know of that I could try out and get ClearType working on Chrome?

Related posts at athe.la:

1. The New Resizeable TextArea in Firefox 3.7 So there I was, whittering away my time on facebook...
2. The effects of moving a wordpress.com blog with little traffic to a new domain As you may know, I’ve bought some epic hosting from...
3. How to Vertically Align Text Within an Element Just thought I’d let you all know of a quick...