text-rendering

  • Revision slug: CSS/text-rendering
  • Revision title: text-rendering
  • Revision id: 25007
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment WebKit and Chrome version added; 49 words added, 48 words removed

Revision Content

{{ CSSRef() }} {{ gecko_minversion_header("1.9") }}

Summary

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

One very visible effect is: 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).

  • {{ Xref_cssinitial() }}: auto
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: ?

Syntax

text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

Values

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, currently the same as optimizeLegibility.

Examples

/* 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; }

Live Example

CSS code Kerning Ligatures
font: 19.9px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
font: 20px 'DejaVu Serif',Constantia; LYoWAT ff fi fl ffl
font: 3em 'DejaVu Serif',Constantia;
text-rendering: optimizeSpeed;
LYoWAT ff fi fl ffl
font: 3em 'Dejavu Serif',Constantia;
text-rendering: optimizeLegibility;
LYoWAT ff fi fl ffl

Notes

  • The 20px threshold value of the auto keyword can be changed by editing about:config
    browser.display.auto_quality_min_font_size
  • Not supported on Mac OS, behaves always similar to optimizeLegibility.

Browser compatibility

Browser Lowest version
Internet Explorer ---
Firefox (Gecko), Windows and Linux 3.0 (1.9)
Firefox (Gecko), Mac OS ---
Opera ---
Safari | Chrome | WebKit 5.0 | 4.0 | 532.5

Specifications

This is an SVG property, it is not defined in any CSS standard. Gecko (Firefox) and WebKit apply text-rendering also to HTML and XML content.

See also

{{ CSS_Reference:Text() }}

Revision Source

<p>{{ CSSRef() }} {{ gecko_minversion_header("1.9") }}</p>
<h3>Summary</h3>
<p>The<code> text-rendering </code>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.</p>
<p>One very visible effect is:<code> optimizeLegibility </code>enables ligatures (ff, fi, fl etc.) in text smaller than 20px for some fonts (e.g. Microsoft's<em> Calibri, Candara, Constantia and Corbel</em> or the <em>DejaVu</em> font family).</p>
<ul> <li>{{ Xref_cssinitial() }}: auto</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: ?</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</pre>
<h3>Values</h3>
<dl> <dt>auto</dt> <dd>The browser will make educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.</dd> <dd>In practice, Gecko desktop browsers like Firefox use<code> optimizeLegibility </code>if font size is <strong>20px </strong>or larger. Otherwise<code> optimizeSpeed </code>for smaller text.</dd> <dt>optimizeSpeed</dt> <dd>Gecko will emphasize rendering speed over legibility and geometric precision while drawing text. Disables kerning and ligatures.</dd> <dt>optimizeLegibility</dt> <dd>Gecko will emphasize legibility over rendering speed and geometric precision. This enables <strong>kerning</strong> and optional <strong>ligatures</strong>.</dd> <dt>geometricPrecision</dt> <dd>Gecko will emphasize geometric precision over rendering speed and legibility, currently the same as<code> optimizeLegibility</code>.</dd>
</dl>
<h3>Examples</h3>
<pre>/* 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; }</pre>
<h4>Live Example</h4>
<table class="standard-table"> <tbody> <tr> <th>CSS code</th> <th>Kerning</th> <th>Ligatures</th> </tr> <tr style="font: 19.9px 'DejaVu Serif',Constantia"> <td style="font:medium monospace">font: 19.9px 'DejaVu Serif',Constantia;</td> <td>LYoWAT</td> <td>ff fi fl ffl</td> </tr> <tr style="font: 20px 'DejaVu Serif',Constantia"> <td style="font:medium monospace">font: 20px 'DejaVu Serif',Constantia;</td> <td>LYoWAT</td> <td>ff fi fl ffl</td> </tr> <tr style="font: 3em 'DejaVu Serif',Constantia; text-rendering:optimizeSpeed;"> <td style="font:medium monospace">font: 3em 'DejaVu Serif',Constantia;<br> text-rendering: optimizeSpeed;</td> <td>LYoWAT</td> <td>ff fi fl ffl</td> </tr> <tr style="font: 3em 'Dejavu Serif',Constantia; text-rendering:optimizeLegibility;"> <td style="font:medium monospace">font: 3em 'Dejavu Serif',Constantia;<br> text-rendering: optimizeLegibility;</td> <td>LYoWAT</td> <td>ff fi fl ffl</td> </tr> </tbody>
</table>
<h3>Notes</h3>
<ul> <li>The 20px threshold value of the<code> auto </code>keyword can be changed by editing <em>about:config</em> <br> <code>browser.display.auto_quality_min_font_size</code></li> <li>Not supported on Mac OS, behaves always similar to<code> optimizeLegibility</code>.</li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko), Windows and Linux</td> <td><strong>3.0</strong> (1.9)</td> </tr> <tr> <td>Firefox (Gecko), Mac OS</td> <td>---</td> </tr> <tr> <td>Opera</td> <td>---</td> </tr> <tr> <td>Safari | Chrome | WebKit</td> <td>5.0 | 4.0 | 532.5</td> </tr> </tbody>
</table>
<h3>Specifications</h3>
<p>This is an SVG property, it is not defined in any CSS standard. Gecko (Firefox) and WebKit apply<code> text-rendering </code>also to HTML and XML content.</p>
<ul> <li><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty">SVG 1.1 Painting #text-rendering</a></li>
</ul>
<h3>See also</h3>
<p>{{ CSS_Reference:Text() }}</p>
Revert to this revision