text-rendering

text-rendering is a CSS property that provides a hint to the browser's rendering engine about how to optimize text display — balancing trade-offs between rendering speed, geometric precision, and typographic quality features like ligatures and kerning.

The property accepts four values:

p {
  text-rendering: auto;             /* Browser decides (default) */
}

.optimized-legibility {
  text-rendering: optimizeLegibility;  /* Enable kerning + ligatures */
}

.fast-text {
  text-rendering: optimizeSpeed;      /* Disable kerning + ligatures for speed */
}

.geometric {
  text-rendering: geometricPrecision; /* Precise curves, smooth scaling */
}

optimizeLegibility is the most commonly discussed value. It enables kerning pairs and optional ligatures even at sizes where browsers might otherwise skip them for performance. For headline text in display fonts like Raleway or Josefin Sans, which have distinctive ligatures and tight kerning, this can produce noticeably more polished results:

h1, h2, h3 {
  text-rendering: optimizeLegibility;
}

However, optimizeLegibility comes with a known performance cost. On mobile devices and when rendering large amounts of text, it can cause noticeable slowdowns — sometimes adding hundreds of milliseconds to render time on older hardware. For this reason, it's generally recommended to apply it selectively to headings rather than to the entire page body.

geometricPrecision ensures that fonts are rendered with mathematically precise curves at any scale. This matters for SVG text and scenarios where text is transformed, scaled, or animated — places where sub-pixel rounding in normal rendering would create visual inconsistencies.

Modern CSS has introduced more targeted alternatives for controlling specific typographic features. Rather than relying on text-rendering, consider using:

body {
  font-kerning: normal;       /* Enable kerning */
  font-variant-ligatures: common-ligatures;  /* Enable standard ligatures */
}

h1 {
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}

These properties provide more granular control over specific features without the broad (and sometimes unpredictable) effects of text-rendering. They're also better supported and better defined across browsers.

The text-rendering property is technically a hint — browsers are free to ignore it. Behavior varies across Chrome, Firefox, and Safari, so testing across engines is important when fine-tuning typography. For most practical purposes, using font-kerning: normal and font-variant-ligatures explicitly gives you more reliable cross-browser control over the same features optimizeLegibility attempts to enable.