fonts - Is it safe to use the CSS rule "text-rendering: optimizelegibility;" on all text?

Question

I noticed this woo theme for example has it set on the HTML tag and therefore the whole site's text has it set. I read that it can cause performance problems but that was a while ago. Some people suggested only adding it to headers and big text.

Have the rules changed now? Do browsers perform well with it?

Answer 1

No: there have been many bugs over the years on various platforms which cause text not to be displayed or displayed incorrectly (see below). If your goal is to enable ligatures, there's actually standard property font-variant-ligatures defined in CSS Fonts Level 3 which offers full control:

font-variant-ligatures: common-ligatures;
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

See font-variant for other typographic features which can be enabled such as small caps, alternate letter forms, etc.

History

Before font-variant-ligatures & the related properties were added, the older font-feature-settings property allowed the same feature to be enabled. This is a lower-level interface and is no longer recommended except to enable OpenType features which do not have a higher-level interface.

http://blog.fontdeck.com/post/15777165734/opentype-1 has a simple example:

h1 {
    -webkit-font-feature-settings: "liga", "dlig";
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}

http://elliotjaystocks.com/blog/the-fine-flourish-of-the-ligature/ has more discussion as well.

Bug Gallery

The popular HTML5 Boilerplate project removed it two years ago due to various rendering problems:

https://github.com/h5bp/html5-boilerplate/issues/78

Two Chromium bugs which I just fixed this morning caused Chrome 21 on Windows XP to either fail to perform font substitution at all, displaying the missing character symbol rather than using one from a different font, and displaying text incorrectly overlapping other elements:

http://code.google.com/p/chromium/issues/detail?id=114719

http://code.google.com/p/chromium/issues/detail?id=149548

See http://aestheticallyloyal.com/public/optimize-legibility/ for a few other concerns.

http://bocoup.com/weblog/text-rendering/ highlighted compatibility problems on Android and general performance issues