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.
9 Responses
Leave a comment or contact me via Twitter @TrentWalton
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?
What is the recent news for using ‘text-rendering: optimizeLegibility;’?
I discovered that having “text-rendering: optimizeLegibility;” by default sometimes prevents web-kit browsers from displaying certain fonts in bold weight, in this particular case, it was not displaying the google web font Coda that I had displayed at 70px. By changing this to “text-rendering: auto” for the title, it properly displayed, rather than a fall back font.
@Gray Ayer: Thanks for the heads up :)
In the latest version of Chrome (v23) if you specify “text-rendering: optimizeLegibility” then “font-variant small-caps” doesn’t work.
@Richard,
That is a known bug in Chrome and unfortunately, it still has yet to be fixed.
Indeed, still not fixed. Just came across it. It’d be nice to post a link to the aforementioned bug in their issue tracker.