text-rendering

Syntax

/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: revert;
text-rendering: revert-layer;
text-rendering: unset;

Values

auto

The browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. For differences in how this value is interpreted by the browser, see the compatibility table.

The auto value is a good default for balancing quality and performance, especially for extended bodies of plain text.

optimizeSpeed

The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

The optimizeSpeed value is preferable in resource-constrained rendering scenarios, such as slow processors or low battery.

optimizeLegibility

The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.

The optimizeLegibility value is preferable for texts that are large in size but short in content, such as headers or banners, to enhance their readability. It could also be used for high-quality professional typography such as published articles. It's not recommended for typical articles due to potential performance impacts.

geometricPrecision

The browser emphasizes geometric precision over rendering speed and legibility. Certain aspects of fonts — such as kerning — don't scale linearly. So this value can make text using those fonts look good.

In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

But the geometricPrecision property — when fully supported by the rendering engine — lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

The geometricPrecision value optimizes neither readability nor performance. It usually makes sense in SVG, where you want your graphic to scale faithfully without distorting the text dimensions.

Note: WebKit precisely applies the specified value, but Gecko treats the value the same as optimizeLegibility.

Formal definition

Formal syntax

text-rendering = 
  auto                |
  optimizeSpeed       |
  optimizeLegibility  |
  geometricPrecision  

Examples

Automatic application of optimizeLegibility

This demonstrates how optimizeLegibility is used by browsers automatically when the font-size is smaller than 20px.

HTML

<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>

CSS

.small {
  font:
    19.9px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}
.big {
  font:
    20px "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

Result

optimizeSpeed vs. optimizeLegibility

This example shows the difference between the appearance of optimizeSpeed and optimizeLegibility (in your browser; other browsers may vary).

HTML

<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>

CSS

p {
  font:
    1.5em "Constantia",
    "Times New Roman",
    "Georgia",
    "Palatino",
    serif;
}

.speed {
  text-rendering: optimizeSpeed;
}
.legibility {
  text-rendering: optimizeLegibility;
}

Result

Specifications

Browser compatibility

See also

• Drawing text in a <canvas>

• CSS Text Decoration CSS module

• Related CSS properties

  • text-decoration (and its longhand properties, such as text-decoration-line, text-decoration-style, and text-decoration-thickness)
  • text-emphasis (and its longhand properties, including text-emphasis-color, text-emphasis-position, and text-emphasis-style)
  • text-shadow
  • text-transform

• The SVG text-rendering attribute

• SVG and CSS