maxvoltar

RSS

by Tim Van Damme

Follow me on Twitter

-webkit-font-smoothing

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;

-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;

-webkit-font-smoothing: subpixel-antialiased;

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

-webkit-font-smoothing: antialiased;

-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;
}