CSS Text-Rendering
This morning I saw a couple of tweets from @seangaffney and @maxvoltar about the CSS text-rendering property, which is in the W3C Working Draft. Aesthetically Loyal has outlined the differences in kerning pairs and browser support for text-rendering: optimizeLegibility; quite nicely, and after seeing how well capital As, Vs, Ys and Ts display I had to test it for myself.
Similar to Kyle Meyer’s experiment, I noticed a significant improvement and added the property to my body CSS for this site. Overall, type looks much tighter and successive capital letters, like “CSS”, seem more evenly spaced. Firefox uses optimizeLegibility by default for font sizes 20px or larger and I agree with Paul Irish’s thought that Webkit should do the same.
3 Responses
This is awesome. That said, I’d still love to see webkit properly obey letter-spacing the same way that mozilla does. Ugh.
I wrote a similar entry (http://www.offroadcode.com/2010/7/1/why-you-shouldn%27t-use-helvetica-in-your-css.aspx) about this recently in response to getting a peak at the new digg site which suffered terribly with rendering the body copy in Helvetica. They’ve implemented this css rule on the new alpha site and it’s cleared up the legibility very well at smaller sizes.
i just noticed that
text-rendering: optimizeLegibility;
crashes dolphin and android default browser on my htc devices at least.
can anybody confirm?
i cannot i prefix it with -webkit-, right?