CSS text-rendering Property

Description

The text-rendering CSS property is a rendering hint that influences how the browser’s text shaping and rasterization pipeline prioritizes trade-offs such as legibility, geometric precision and rendering speed. It does not itself change the font or the layout metrics, but it guides the user agent’s decisions about how aggressively to apply font hinting, subpixel antialiasing, kerning and ligature shaping. Because it acts as a hint to the rendering engine, its effects can vary between browsers, platforms and for different font formats; it’s best thought of as a way to nudge the renderer toward a particular visual or performance outcome rather than an absolute instruction.

In practical terms, the property matters most where small differences in glyph rasterization affect readability or visual crispness: tiny UI labels, large display headlines that are scaled, and text inside vector graphics (SVG) or transformed elements can all look noticeably different depending on how the renderer optimizes text. The way an individual font is designed and chosen is often the biggest factor in final appearance, so consider pairing it with careful font selection and sizing — for example, adjusting font-family and font-size to achieve the intended effect across target devices.

Beyond pixel-level rendering, the property interacts with higher-level typographic features handled by text shaping engines: decisions about whether to enable kerning and discretionary ligatures, how glyph outlines are hinted at small sizes, and how subpixel antialiasing is applied can all change perceived spacing and weight. Because these interactions affect how lines of text fit together, you should consider them alongside spacing properties such as letter-spacing and vertical rhythm properties like line-height, especially when aiming for consistent multi-device presentation.

When using text-rendering in production, treat it as an optimization tool: apply it where you need a specific visual result or where rendering performance is a concern, then validate across platforms and at different device pixel ratios. Don’t rely on it for functional behavior (for example, accessibility or precise layout), and test with your chosen fonts and weights to confirm the intended effect — visual differences are often subtle and platform-dependent, so manual review is the safest way to ensure the outcome you want.

Definition

Initial value: auto
Applies to: text elements
Inherited: yes
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.textRendering

Syntax

text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Values

autoThe 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.
optimizeSpeedThe browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
optimizeLegibilityThe browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
geometricPrecisionThe 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

Example

HTML

<main class="examples">

  <h1>CSS text-rendering examples</h1>



  <div class="grid">

    <article class="card auto">

      <h2>text-rendering: auto</h2>

      <p>Office, flower, efficient  -  The quick brown fox jumps over the lazy dog.</p>

    </article>



    <article class="card optimize-legibility">

      <h2>text-rendering: optimizeLegibility</h2>

      <p>Office, flower, efficient  -  The quick brown fox jumps over the lazy dog.</p>

    </article>



    <article class="card optimize-speed">

      <h2>text-rendering: optimizeSpeed</h2>

      <p>Office, flower, efficient  -  The quick brown fox jumps over the lazy dog.</p>

    </article>



    <article class="card geometric-precision">

      <h2>text-rendering: geometricPrecision</h2>

      <p>Office, flower, efficient  -  The quick brown fox jumps over the lazy dog.</p>

    </article>

  </div>

</main>

CSS

/* Base layout */
body {
  font-family: "Georgia", "Times New Roman", serif;
  background: #f7f7f8;
  color: #111;
  padding: 32px;
}

.examples {
  max-width: 1000px;
  margin: 0 auto;
}

.examples h1 {
  font-size: 20px;
  margin-bottom: 18px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.card {
  background: white;
  padding: 14px 16px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
}

.card h2 {
  font-size: 14px;
  margin: 0 0 10px;
  font-weight: 600;
}

.card p {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* text-rendering examples */
.auto {
  text-rendering: auto;
}

.optimize-legibility {
  text-rendering: optimizeLegibility;
}

.optimize-speed {
  text-rendering: optimizeSpeed;
}

.geometric-precision {
  text-rendering: geometricPrecision;
}

/* Responsive tweak */
@media (min-width: 720px) {
  .card p {
    font-size: 20px;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS text-rendering property. Hover over a browser icon to see the version that first introduced support for this CSS property.