The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

Optimize Legibility

Following on from my last post, here’s another tip for increasing text readability, this time using a CSS property rather than avoiding one: apply the following CSS declaration to your headlines and body text:

text-rendering: optimizeLegibility;

Text-rendering isn’t part of CSS spec (it is part of the SVG spec however), but Gecko and WebKit browsers have it working for HTML content. MDN has a detailed description of what it does, as well as the various options.

Basically, setting the value of “optimizeLegibility” for the “text-rendering” property lets you enable things like ligatures and more accurate kerning (the spacing between letters), which, as the name of the value implies, leads to improved legibility and an overall better appearance of the text as unnecessary spaces are eliminated where possible. Here’s an illustration to show you the difference this makes:

The first line shows the default text rendering mode optimized for speed, which is the default setting, and the second line shows the same text with “optimizeLegibility” enabled. I’ve overlaid faint blue lines over the text to highlight affected areas.

You can see that the default mode only knows about the overall width of the letter, and doesn’t account for situations where two letters can be pushed closer together, like the combination of lowercase “e” following the uppercase “T”. The “optimizeLegibility” mode takes this into account and tightens the text a little bit by eliminating such cases of wasted space. This is most useful in headlines, but will also make a difference in body text.

I haven’t noticed any percievable speed differences between the two modes, although there are certain cases where you might want to avoid this mode. I found that using it in conjunction with letter-spacing of uppercase characters, as often used in headline styles, often produces irregular letter spacings, so it is probably wise ensure that you test everything you choose to apply it to rather than enabling it sitewide.

[Update - Nov 15, 2012: Marco Arment points out that there are significant performance issues with optimizeLegibility on mobile devices, so you should be careful not to apply it to everything on very long pages and avoid using it altogether for older devices. If in doubt, use it for headings only.]

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: