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.

compared type

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

  • Grant

    This is awesome. That said, I’d still love to see webkit properly obey letter-spacing the same way that mozilla does. Ugh.

  • James

    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.

  • kosmar

    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?

  • Jamie

    What is the recent news for using ‘text-rendering: optimizeLegibility;’?

  • Gray Ayer

    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.

  • Trent

    @Gray Ayer: Thanks for the heads up :)

  • Richard Lawton

    In the latest version of Chrome (v23) if you specify “text-rendering: optimizeLegibility” then “font-variant small-caps” doesn’t work.

  • Chris Burton

    @Richard,

    That is a known bug in Chrome and unfortunately, it still has yet to be fixed.

  • Davi Lima

    Indeed, still not fixed. Just came across it. It’d be nice to post a link to the aforementioned bug in their issue tracker.

Leave a Reply