This is an archive site. For the recent posts, visit orderedlist.com.

Ordered List

OrderedList

Jan 3 2011

Thinning Text in Webkit (Safari)

Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. There have been several ways of dealing with this in the past, but the latest versions of Webkit have given us a much better solution.

On Safari on Leopard and previous versions of OS X, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. With Safari 4 and Snow Leopard, I suggested using -webkit-text-stroke. But now, with Safari 5 and Google Chrome, we actually have a dedicated CSS property we can use to render text the way we want.

Here’s the solution, and it’s remarkably simple:

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

There you go. Simply add that to your css file. Change the selector, if you need, and put your type on a diet.