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

Answer 2

from the MDN text-rendering page, last updated on 18:27, 29 Apr 2012, it reads:

The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text. The browser makes trade-offs among speed, legibility, and geometric precision. The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, Mac OS X and Linux.

which tels us that it is not defined in any CSS standard, thus leading to cross-browser issues, as seen on the Browser compatibility table.

By default

The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.

So, is safe to assume that the best option is to let the browser take care of details like this, since this feature is not a standard (yet), and most browsers don't support it.