Ino Detelić

Font anti-aliasing technique in Chrome changes after 48px size

Google Chrome does render fonts with subpixel anti-aliasing but the text looks more jaggy than in other browsers, because it only supports horizontal anti-aliasing.
The jaggies are specially visible on the top and bottom of the curved letters, like S, O and C, while looking fine on the sides of these letters.

Look at the screenshots of some letters with the Georgia font at 48px:

Chrome Georgia 48px ver18.0.1025.100 beta-m

Google Chrome 18.0.1025.100 beta-m - Georgia at 48px

Can you notice the jaggies on the top of the letters in Chrome?

But after a certain font size, Chrome does some other method to render fonts. In Georgia font, that size is 49px:

Chrome Georgia 49px ver18.0.1025.100 beta-m

Google Chrome 18.0.1025.100 beta-m - Georgia at 49px

The letters are no longer jagged!

If we take a closer look, we can see that while it does look better, it’s not using sub-pixel rendering, but monochromatic anti-aliasing for both the vertical and horizontal directions.

Here’s a closer look at the fonts rendered above, amplified at 500%:

Chrome Georgia 48px ver18.0.1025.100 beta-m.png at 500 percent zoom

Chrome - Georgia 48px @ 500% zoom

Chrome Georgia 49px ver18.0.1025.100 beta-m.png at 500 percent zoom

Chrome - Georgia 49px @ 500% zoom

 

Conclusion: for now if you’re using a big font-size for headers or page titles, consider font-size: 49px to get the smooth edges on Chrome, at least until they use subpixel for horizontal + monochrome for vertical anti-aliasing like the other browsers.

 

More information about font rendering:

http://en.wikipedia.org/wiki/Subpixel_rendering

http://blog.typekit.com/2011/07/26/new-from-typekit-improved-font-rendering-on-windows/

http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite

 

For browser comparison, here’s how the same text is rendered in Chrome 18 beta, Firefox 11.0 and Internet Explorer 9:

Chrome Georgia 48px ver18.0.1025.100 beta-m

Chrome 18.0.1025.100 beta-m - Georgia at 48px

Chrome Georgia 49px ver18.0.1025.100 beta-m

Chrome 18.0.1025.100 beta-m - Georgia at 49px

Firefox Georgia 48px ver11.0

Firefox 11.0 - Georgia at 48px

Internet Explorer 9 - Georgia at 48px

ant the close-ups:

Chrome - Georgia 48px @ 500% zoom

Chrome - Georgia 49px @ 500% zoom

Firefox 11.0- Georgia 48px @ 500% zoom

Internet Explorer 9 - Georgia 48px @ 500% zoom

 

Posted on March 16th, 2012 under random