Login

Font Smoothing in Google Chrome

8/4/2011 Thomas Shields

I've been struggling with font-smoothing in Google Chrome. On larger (40px+) fonts, a noticeable jaggedness can be seen on the edges of the more curved text. Internet Explorer 9 applies the nice new shiny WPF sub-pixel font-smoothing to text and makes it look fantastic. Firefox (at least in Nightly v. 8) does a pretty good job too. You can see what I mean here. Make sure you're running Chrome 14 (others might behave similarly but I know Chrome 14 does it), IE9, and FF7-8. Or, see the picture below:

example of font smoothing failure in Google Chrome

See the difference? Subtle, perhaps, but it's been driving me insane, especially since I love Google Chrome so much. Prior to Chrome 14.0.833, a simple hack was to apply text-shadow:#fff 0 0 1px, where #fff was the same as the background color of the element the text was on. Chrome (prior to 14.0.833) seemed to start the text shadow inside the text just a little bit. Applying this text shadow would smooth out the jagged edges of the text. In Chrome 14.0.833, however, something changed. I'm not sure what, but I think they pushed the text shadow out a little bit, meaning the hack didn't work anymore as the shadow simply blended with the background.

First, I tried the -webkit-text-stroke:1px #000 where #000 is the color of the text. But this style is meant for use where the color of the text is different from the stroke, for a nice text-outline. When both are the same color, it looks...odd. I'm not sure why; I'm no font-rendering expert. You can see the behavior in the picture after the article.

Next I tried a simple text-shadow:#000 0 0 1px where #000 is the same color as the text. Due to the same Chrome 14.0.833+ problem, this still leaves the font looking somewhat jagged. It's better than just plain text, however.

Next I tried combining the two attempts above. This looks a little bit better, but it bulks up the text as it essentially adds 2 pixels to the thinkness of the text.

Lastly, I tried applying two text-shadows: text-shadow:#000 0 1px 1px, #000 0 -1px 1px where #000 is the color of the text. What this does is apply two text shadows, one of which is pushed down a little and the other pushed up. This way, the text shadow covers the jagged edges. It bulks up the text a little but definitely smooths it out.

Depending on the size of your text, different methods work. Smaller (but still jagged) text could use the text-shadow, larger text could use the shadow/stroke method, and very large text could use the dual-shadow method. Of course the larger the text the less noticeable the extra few pixels become. You can see all the different methods here, or look at the image below. Note that Firefox doesn't support (obviously) -webkit-text-stroke and IE doesn't support that or text shadow. Be sure to click on the image to blow it up to full size and see the difference.

examples of smoothing fixes for Google Chrome

Anyway, hope that helped you! If you have any other fixes, leave an answer on my StackOverflow question.