CSS3 brought with it a whole variety of typographic properties, to give web designers some of the type control we’ve long been dreaming of. One such property was the text-rendering property. This essentially gave web designers the option to add kerning and ligatures to their sites using OpenType fonts. I was so pleased with the addition of this property, I wrote a post for the Baseline Project praising it.

However, this exciting new feature has lost it’s fluffy appeal since I first discovered it, and I’m banishing it from my designs. Here’s the low-down.

Sexy sexy ligatures and kerning. But at what cost?

The first thing I noticed was a problem with highlighting text. When you drag the cursor over a kerned pair of letters (in this case, “T” and “e”), the kerning is deactivated. This causes the surrounding letters to shift out of place and looks pretty weird.

Selecting kerned pairs causing weird behaviour

The next no-no the property got was in Chrome on Windows XP. For some reason, when using web fonts in conjunction with text-rendering: optimizeLegibility, Chrome on XP screwed up all the characters. I talked to Typekit about the issue, and they told me it was down to the CSS property. Upon removing it, it was as good as new.

The herp derp in question, seen here on Owlr

The final straw came on Chromium on Linux distributions. When using text-rendering: optimizeLegibility on this browser, inline elements are given a strange negative margin. This is most likely down to the way that the kerning is done, but either way, it looks just awful.

The final straw — Chromium struggles with optimizeLegibility

I think it’s safe to say that text-rendering is still a very experimental property. Kerning and ligatures are great, but not at the expense of… well, this. Plus, Firefox takes a pretty good approach — it’ll use kerning and ligatures where ever it can, unless you specify otherwise by using the optimizeSpeed value. Hopefully more browsers will take the same approach in the future.