CSS text-rendering Property

The CSS text-rendering property tells the browser's rendering engine what to optimize for when it draws text: raw drawing speed, the best possible legibility, or geometric precision. In practice, it's a hint that lets you turn font features such as kerning (adjusting the space between specific letter pairs) and ligatures (combining characters like fi into a single glyph) on or off.

This page covers what each value does, when it's worth setting, the gotchas to watch for, and runnable examples you can compare side by side.

When would I use it?

For most pages you never need text-rendering — auto already does a sensible job. You reach for it in two situations:

Large, prominent text (headings, hero titles, logotypes) where good kerning and ligatures noticeably improve the look. optimizeLegibility is the value for this.
Long, performance-sensitive pages with a lot of text on low-powered devices, where you want to skip the extra typographic work. That's what optimizeSpeed is for.

The text-rendering property has four keyword values:

auto — the browser decides (the default).
optimizeSpeed — favor drawing speed; kerning and ligatures are disabled.
optimizeLegibility — favor readability; kerning and ligatures are enabled.
geometricPrecision — favor precise geometry so text can be scaled smoothly.

When text-rendering is set to optimizeLegibility, the browser prioritizes legibility by enabling kerning and ligatures. The trade-off is performance: on a page with a large amount of text, forcing legibility can measurably slow down rendering, so apply it selectively rather than to body.

If you want fine-grained control over individual typographic features instead of a broad hint, use the dedicated properties font-kerning, font-variant-ligatures, or font-feature-settings.

The text-rendering property originated in SVG but is now included in the CSS Text Module Level 3 and Level 4 specifications. Gecko-based (Firefox) and WebKit/Blink-based (Safari, Chrome) browsers allow applying it to HTML content via CSS. Because it is not a standardized CSS property everywhere, treat it as a progressive enhancement: the page must still look fine when the browser ignores it.

Initial Value	auto
Applies to	Text elements.
Inherited	Yes.
Animatable	Yes.
Version	Scalable Vector Graphics (SVG) 1.1
DOM Syntax	object.style.textRendering = "optimizeLegibility";

Syntax

CSS text-rendering values

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

Example of the text-rendering property:

CSS text-rendering code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      hr {
        margin: 60px 0;
      }
      table {
        table-layout: fixed;
        padding: .3em;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        margin-bottom: 1em;
      }
      td {
        padding: 15px;
        border: 1px solid #eee;
      }
      h3 {
        font-size: 5em;
        line-height: 1;
        font-family: sans-serif;
      }
      .uppercase {
        text-transform: uppercase;
      }
      .italic {
        font-style: italic;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .optimizeLegibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <h2>Text-rendering example</h2>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="uppercase">LOREM</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility uppercase">LOREM</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3>Ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility">Ipsum</h3>
        </td>
      </tr>
    </table>
    <table>
      <tr>
        <td>Text-rendering: auto;</td>
        <td>
          <h3 class="italic">lorem ipsum</h3>
        </td>
      </tr>
      <tr>
        <td>Text-rendering: optimizeLegibility;</td>
        <td>
          <h3 class="optimizeLegibility italic">lorem ipsum</h3>
        </td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

The difference between "optimizeSpeed" and "optimizeLegibility"

The example below shows the difference between the optimizeSpeed and optimizeLegibility values. The clearest effect is on letter pairs that benefit from kerning and ligatures (such as AV, Wa, or fi). Keep in mind that the result can vary between browsers, and on text that already renders well you may not see any visible change at all:

Example of the text-rendering property with the "optimizeSpeed" and "optimizeLegibility" values:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 1.5em;
        color: #777777;
      }
      .optimize-speed {
        text-rendering: optimizeSpeed;
      }
      .optimize-legibility {
        text-rendering: optimizeLegibility;
      }
    </style>
  </head>
  <body>
    <p class="optimize-speed">AVADA Waffle — fi fl ffi (optimizeSpeed)</p>
    <p class="optimize-legibility">AVADA Waffle — fi fl ffi (optimizeLegibility)</p>
  </body>
</html>

Try it Yourself »

Things to watch out for

It's a hint, not a guarantee. Browsers may interpret or ignore text-rendering, and auto already enables legibility for large text in some engines. Don't rely on it for layout-critical results.
Performance cost on long text. optimizeLegibility on a large block of text can slow rendering and even cause a visible flash on first paint. Apply it to specific elements (headings, short labels) rather than body or *.
It is inherited. Setting it on a parent applies to all descendants, which is exactly why a blanket body { text-rendering: optimizeLegibility; } is risky on text-heavy pages.
Prefer the standard properties when you can. For just kerning or just ligatures, font-kerning and font-variant-ligatures are better-specified and more predictable.

Values

Value	Description
auto	The browser makes guesses about when to optimize for speed, legibility, and geometric precision while drawing text. This value is interpreted differently by the browsers.
optimizeSpeed	Specifies that the browser should emphasize rendering speed over legibility and geometric precision when drawing text. Kerning and ligatures are disabled.
optimizeLegibility	Specifies that the browser should emphasize legibility over rendering speed and geometric precision.
geometricPrecision	Specifies that the browser should emphasize precision over rendering speed and legibility.
initial	It makes the property use its default value.
inherit	It inherits the property from its parents element.

If you're fine-tuning typography, these properties give you more direct control than the broad text-rendering hint: font-kerning, font-variant-ligatures, font-feature-settings, font-family, and letter-spacing.

Practice

The geometricPrecision value of text-rendering property specifies

that the browser should emphasize legibility over rendering speed and geometric precision.that the browser should emphasize rendering speed over legibility and geometric precision when drawing text.that the browser should emphasize precision over rendering speed and legibility.