How to optimize for legibility using text-rendering

The most frustrating aspect of web design for designers trained for print, is the persistent lack of typographic control.

Careful typographic choices are the hallmark of quality work and the lack of that quality online never ceases to be jarring for those of us that know what we’re looking for.

Fortunately, the level of control that we have is increasing all the time and support for more advanced typographic rendering is also increasing. Whilst it’s certainly not possible to deliver the kind of treatment that applications like Illustrator deliver — where every letter can be tweaked if required — there are tools available to increase quality. One of the least known is the text-rendering property.

You won’t find the text-rendering property in any CSS specifications because it’s technically not CSS, it’s an SVG property, although it’s used just like a CSS property. The most important thing is that with a single line of CSS, we can eliminate a few rivers and other imperfections from our text.

The text-rendering property has four settings:

  • auto: allows the browser to choose a setting itself
  • optimizeSpeed: focuses on speed
  • optimizeLegibility: focuses on advanced rendering
  • geometricPrecision: precise rendering

Sadly, the use of the browser default ‘auto’ will normally favor speed rather than legibility — indicative of a standard finalized by developers instead of designers.

As most of us don’t produce pages that are substantial enough to justify the need for the optimizeSpeed setting, we’ll only really be interested in optimizeLegibility (although geometricPrecision is useful for certain fonts).

The CSS code is as follows:

.myClass { text-rendering: optimizeLegibility; }

Here’s a direct comparison of optimizeSpeed and optimizeLegibility, as you can see if you look closely, there are two significant improvements in the more legible version: the ‘ffi’ characters in the first line have been correctly replaced with a ligature, and the kerning has been improved throughout, which is especially notable in the fifth line, where the space between the ‘V’ and the ‘e’ has been corrected.

The kerning improvements can be seen more easily in these overlays:

Chrome Mac

Chrome Windows

Firefox Mac

Firefox Windows

Internet Explorer 9 Windows 

Safari Mac

Browser support is currently inconsistent, however, the fact that text-rendering fails silently in browsers that don’t support it, mean that it’s very usable right now.

Do you use the text-rendering property in your CSS? Would anyone but a typographer even notice the difference? Let us know your thoughts in the comments.

Featured image/thumbnail, fine-tune image via Shutterstock.

  • http://www.facebook.com/emosewamai Andrew Hersh

    Love this article. I had no clue about this property, but I can immediately think of a dozen situations in which I need to be using it.

    Quick note: in the paragraph directly preceding the optimizeSpeed and optimizeLegibility comparison, you have the reader looking for a V-o sequence that has been improved, but the sequence that’s actually there is V-e. It had me confused for a good 30 seconds before I figured out what was going on.

    • Benjie

      Good catch! Thanks for letting us know about that, I’ve updated the ‘o’ to an ‘e’.

  • cameronbaney

    I’ve had some problems using optimizeLegibility and custom fonts. Other than this, I love it.

  • chronicler_Isiah

    Yep – been using text-rendering: optimizeLegibility; as a matter of course for some time.

  • http://twitter.com/jasonnmark jason mark

    Just tried it (using Chrome WebTools) and it seemed to overall make legibility *worse*. There was one instance where it made it better, but not worth doing.

    PS: Your last sentence doesn’t sound like a complete english sentence:

    Browser support is currently inconsistent, however, the fact that text-rendering fails silently in browsers that don’t support it, mean that it’s very usable right now.

  • http://yepi-games.kizifriv1.com/ Yepi Friv

    I loved the data inside your article. I love the way you laid everything out so clearly. There is no method to mistake what you are thinking.

  • http://www.zell-weekeat.com/ Zell Liew

    Great article. I read about the rendering property, but I couldn’t figure for the nuts of me and it thought it was way more complicated than just setting text-rendering: optimizeLegibility;

  • Benjie

    There’s nothing wrong with the sentence; it’s grammatically and logically correct. It means: support for text-rendering isn’t universal yet, but it doesn’t have any negative effects where it’s not supported, so you lose nothing by using it.

  • Chris Gaines

    what are the speed implications on setting optimizeLegibility? Had there been any testing? I’ve thought about using it, but have custom fonts and I am concerned about the speed.

  • Penina S. Finger

    I’m really excited to learn about this and can’t wait to give it a spin! My first thought was to use it inline for my own “in brief” blog posts – usually 40 words or less and font size greater than 20px.

  • Penina S. Finger

    Follow-up: Not getting great results in WordPress. Found this (Nov 2011) discussion in the stackoverflow forums: http://bit.ly/12RpVJL

    I’m using a PageLines theme, but I don’t think that’s the issue.

  • http://www.yepi-yepi.com/ Yepi Friv

    It is so interesting. Thanks for sharing

  • Chris

    Saw this property in a site I was working on and came across this article. The only thing is, half of the images are broken!

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      They all seem to be working for me. Could you check again? Maybe it was a temporary issue.