Text-rendering

This non-standard property is not recommended. Authors should generally find an alternative way to accomplish the same task while adhering to all best practices, or simply do without it if it is unimportant.

The CSS text-rendering property is used on Windows and Linux to provide information to the rendering engine about what sorts of tradeoffs to make when rendering text, in order to optimize speed or legibility. Currently only Gecko 1.9 (Firefox 3.0) and WebKit 532.5 (Safari 5 and Chrome 4) support this property. This property does not function on Mac OS X. This is an SVG property, it is not defined in any CSS standard. Gecko and WebKit apply text-rendering also to HTML and XML content.

Values

Value	Description
auto	The browser will make educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. In practice, Gecko desktop browsers like Firefox use optimizeLegibility if font size is 20px or larger. Otherwise optimizeSpeed for smaller text.
optimizeSpeed	Gecko will emphasize rendering speed over legibility and geometric precision while drawing text. Disables kerning and ligatures.
optimizeLegibility	Gecko will emphasize legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
geometricPrecision	Gecko will emphasize geometric precision over rendering speed and legibility; this is currently the same as optimizeLegibility.

One very visible effect is that optimizeLegibility enables ligatures (ff, fi, fl etc.) in text smaller than 20px for some fonts (e.g. Microsoft's Calibri, Candara, Constantia and Corbel or the DejaVu font family).

CSS example:

/* make sure all fonts in the HTML document display in all its glory,
   but avoid inadequate ligatures in class foo elements */

body { 
      text-rendering:optimizeLegibility; 
}

.foo { 
      text-rendering:optimizeSpeed; 
}

External Links

• The text-rendering property in SVG11