The Too Good to Be True CSS Text Rendering Property

The CSS text rendering property is a mixed bag. On initial pass it seems to be an obvious choice for improving type on the web.

However after a bit of reading there are known bugs in some browsers, operating systems and performance issues on Android and older versions of iOS.¹

There are four values that text rendering can be set to ²:

1. auto: The browser renders the text based on when to optimize for speed, legibility, and geometric precision.
2. optimizeSpeed: The browser renders text for speed over the other values. It disables kerning and ligatures.
3. optimizeLegibility: The browser renders text for legibility over the other values. This enables kerning and optional ligatures.
4. geometricPrecision: The browser renders text for geometric precision over rendering speed and legibility.

So I’ve been playing around with just setting Legibility to headings and blockquotes. Keeping it to large sized and short pieces of text.

1. Much of this research can be found at css-tricks.com by the always comprehensive Chris Coyier ↩
2. https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering ↩