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?

Solution 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

Solution 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.

Solution 3

text-rendering: optimizeLegibility; was used in one of our web apps. it rendered properly in all browsers, except one - chrome (64) on windows 7.

Had to remove the property as most of our end users were from that category.

Solution 4

I've just fixed a bug where Chrome was refusing to render web fonts (it always fell back to a non-web one, for no reason we could discern). In the end - after considerable amount of head-scratching - the problem was fixed by setting text-rendering from optimizeLegibility (which had been set by Twitter Bootstrap, for what it's worth) to auto.

So I would say for the moment the answer is probably "no". Which isn't to say don't use it, but don't apply it to everything. Use it where needed and test it carefully for weirdnesses or unexpected effects (especially in Chrome!).

Solution 5

using "text-rendering: optimizelegibility" also causes rendering errors in android native browser (4.2 & 4.3). If you use this attribute in combination with loading new fonts via @font-face, the font will not display at all (only fallback). without "text-rendering: optimizelegibility" and @font-face the font loads and gets displayed as expected.

View more solutions

Comments

[tardate]

me too. Especially since "not rendering properly" meant words would actually not be rendered at all if the HTML text contained tab characters

[Volker E.]

Please be aware that there has never been support for -o-font-feature-settings in Presto. By switching to Blink Opera 15 started supporting -webkit-font-feature-settings.

[Chris Adams]

@VolkerE. – Thanks – I just removed that line. Hopefully people will use font-variant-ligatures now in any case.