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.
