Eli Grey

Better font smoothing in Google Chrome on Windows

Screenshots: before and after.

Firefox 4 and Internet Explorer 9 already support improved font smoothing offered by the DirectWrite API in Windows 7 and Vista. Google Chrome (WebKit) has yet to support DirectWrite, which may be the deal breaker for you when choosing to use either Google Chrome or Firefox if you are primarily a Windows user.

I recently discovered while messing with the CSS3 text-shadow property in Google Chrome that it somehow improves font smoothing in Google Chrome (but surprisingly not the WebKit-based Safari too). To use the better font smoothing on your website, just use text-shadow: rgba(0, 0, 0, .01) 0 0 1px in your CSS on whatever you want to have better font smoothing. I have also created a Google Chrome extension called “Enhanced Windows Font Smoothing“, which applies this CSS hack to every website and to all text. Please note that smaller text may look a little unsightly, though it will still be completely readable. For a good example website try the extension on, see how the text logo on the Ubuntu Font Family website looks before and after installation of the Google Chrome extension. Please note that this CSS hack may cause adverse side-effects on Mac OS X, so I suggest that you try to target Windows UAs only.

Tagged: ,
  • http://twitter.com/pazsxn pazsxn

    It also makes font smoothing much worse on Mac OS X (I *really* not want anybody messing with my default subpixel anti-aliasing. It’s best bar none according to *my* taste).

    When applied to large blocks of text, rendering is noticeably slower.

    • http://eligrey.com/ Eli Grey

      Ah, I only tested it on Linux and Windows, and it had no effect on Linux. I’ve edited the post warn that the fix may have adverse side-effects on Mac OS X and suggested only applying the fix for Windows UAs.

  • http://bowdenweb.com/ J. Albert Bowden II

    nice find. shame to see differences in -webkit renderings, but the Chrome team certainly has been doing some outstanding things. thanks!

  • Pingback: The Growing @font-face Problem : Jimmy Says

  • http://profiles.google.com/hardwarebeta Uen X

    Hi
    That CSS trick no longer works for Chrome Dev 12.0.742.16
    You can do a check on it…

    • http://eligrey.com Eli Grey

      Thanks for mentioning that. Apparently it still works, but no longer with fully transparent shadows. The new fix would be to use text-shadow: rgba(0, 0, 0, .01) 0 0 1px

      • http://koviko.net/ Kovik

        The reason for this is that text-shadow slows down the rendering which, in turn, slows down all animations. For good PCs, this is barely noticeable. But, on low-end PCs (like the one at my office… -_-), it can be quite extreme.

  • http://twitter.com/charlesroper Charles Roper

    What this does is disable ClearType sub-pixel anti-aliasing and replaces it with the older GDI standard anti-aliasing. This looks good on larger text, but breaks down on smaller text, as you note. It’s definitely not enabling DirectWrite, which Chrome doesn’t yet support. Here’s a good article from Tim Brown (type manage at TypeKit) on the subject of type rendering engines:

    http://blog.typekit.com/2010/10/15/type-rendering-operating-systems/
    Be sure to read the full 7 (!) posts in the series.

    What would be quite cool is a way of only applying the hack to larger text, say over 20px.

  • Pingback: @davecoveney Ah, found this…… | Theme Lab Tweets

  • Shishir Thakur2005

    Thanks a lot, was banging my head since morning to fix this :)

  • Timotimo

    …in developer-channel-version 14.0.835.2 it doesn’t work any more. I have the same problem with my extension…

  • http://www.facebook.com/nicktheandroid Nicholas Chamberlin

    Chrome has screwed this up in version 14.0.835.0 on the Dev channel. It no longer works, so now all text with a text-shadow applied to it looks like shit. Is there a way to set it to render like this again? by default just for headings or something, like a css declaration? It made heading text look awesome, it would be horrible to use this on all text, it would slow it down considerably. 

    • http://twitter.com/lubozviera Lubo Zviera Ryba

      Exactly. “text-shadow: 0 0 1px rgba(255,255,255,0.1);” doesn’t work anymore in Chrome 16. Anybody has an idea how to solve this problem?

      Only thing what works is to use bold, but that’s not a solution and it looks ugly on all text.

  • Boris Valusek

    Holy crap they still haven’t fixed this. how can this be? Google damn you!

    • Jeremy Crapsey

      Seems like a big disapointment when I ran into this issue.

  • http://enigmacommunity.org/ lucasbytegenius

    Darn it, it’s not on the Chrome web store :(

  • Pingback: @font-face y renderizado de texto en Chrome Windows ↝ CSSLab

  • Pingback: Chrome's bad font rendering - DesignersTalk

  • http://twitter.com/Yashiro Yassir Ennazk
    • http://eligrey.com Eli Grey

      Unfortunately, I don’t think that any of the methods from that page or from my post work anymore in the latest Chrome.

  • http://mgdd.pl/blog Magda

    The best way to enable font smoothing in Google Chrome is to use SVG fonts – http://www.fontspring.com/blog/smoother-web-font-rendering-chrome

  • Mingwei Li

    Thanks so much. Now i’m having weird font rendering on Google Play Store website and I’m gonna try your extension to see how it works. Thanks in advance.

  • Alvin Brinson

    http://goo.gl/pYQiOH – new extension that does the same thing.