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.
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.
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.
nice find. shame to see differences in -webkit renderings, but the Chrome team certainly has been doing some outstanding things. thanks!
[…] Chrome, there’s a text-shadow hack that works just fine in some cases. This works great for headlines Though I’ve actually seen […]
Hi
That CSS trick no longer works for Chrome Dev 12.0.742.16
You can do a check on it…
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 1pxThe 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.
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.
[…] @davecoveney Ah, found this…worked great: http://eligrey.com/blog/post/better-font-smoothing-in-google-chrome-on-windows […]
Thanks a lot, was banging my head since morning to fix this 🙂
…in developer-channel-version 14.0.835.2 it doesn’t work any more. I have the same problem with my extension…
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.
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.
Holy crap they still haven’t fixed this. how can this be? Google damn you!
Seems like a big disapointment when I ran into this issue.
Darn it, it’s not on the Chrome web store 🙁
[…] Better font smoothing in Google Chrome on Windows […]
[…] stuff: Beefing Up Dull Text in WebKit | CSS-Tricks Better font smoothing in Google Chrome on Windows — Eli Grey __________________ […]
https://gist.github.com/dalethedeveloper/1846552
Unfortunately, I don’t think that any of the methods from that page or from my post work anymore in the latest Chrome.
dsdsdsdsdsds
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
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.
http://goo.gl/pYQiOH – new extension that does the same thing.