Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, I’ve found an alternative.
The thick text is much more noticeable when light text is placed on a dark background. It annoys me so much, that as I was working on a redesign for this site, I seriously thought about throwing out a dark design because I was scared of portly typography. So I dug in, and found a way to slim down the type in my favorite browser. Here’s the solution, and it’s remarkably simple:
body { -webkit-text-stroke:1px transparent; }
@media only screen and (max-device-width:480px) {body{-webkit-text-stroke:0 black;}}There you go. SImply add that to your css file. Change the selector, if you need, and put your type on a diet. The second line is to prevent Mobile Safari from using the technique, as it handles text well, and doesn’t support transparency on text-stroke.