I’m not a big fan of the default text rendering in WebKit, in my opinion, it’s too heavy. There used to be a workaround where setting text-shadow would make the text thinner, but updating to Snow Leopard rendered that useless. Then someone found another hack (using -webkit-text-stroke) that seemed to work nicely, but it wasn’t usable on text-heavy pages, causing performance issues when scrolling.

So you can imagine how happy I was when I saw Faruk Ateş tweeting something about -webkit-font-smoothing. Being the CSS geek I am, I whipped up a demo page (you need the latest WebKit Nightly to properly see that page) to see what exactly it did.

Here’s an overview in case you don’t have WebKit Nightly installed:

-webkit-font-smoothing: none;

This looks great to use with pixel fonts, or maybe even for code snippets at a small size. Or maybe you’re melancholic and you miss the default text rendering in IE6.

-webkit-font-smoothing: subpixel-antialiased;

This is what we see by default. Some people like it, most don’t.

-webkit-font-smoothing: antialiased;

Ah yes, this is what we want, the sweet spot. For now, it won’t work yet, but put this in your CSS file, and you’ll see the changes in the next update of Safari:

html {
-webkit-font-smoothing: antialiased;
}

Adam Perfect points out this already works in the current version of Google Chrome.

About Me

Hi, my name is Tim Van Damme. Formerly a freelance designer from Belgium, I now work as an interface designer for GowallaInstagramDropbox in Austin, Texas San Francisco, California. I’m happily married to the most beautiful girl in the world and we are expecting welcomed a baby girl into our lives late December 2011.