CSS text-rendering Property

Description

The text-rendering CSS property is used to control how text is rendered in a web browser. It defines the level of font smoothing and anti-aliasing applied to text characters, which can affect the overall clarity and appearance of text on a webpage. The property can take various values, including "auto," which lets the browser decide the rendering method, and "optimizeLegibility," which prioritizes improved readability but may sacrifice some rendering speed. Web developers can use this property to fine-tune the text rendering to achieve their desired balance between visual quality and performance for different types of text content on their websites.

Initial value: auto
Applies to: text elements
Inherited: yes
Computed value: as specified
Animatable: discrete
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

<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

Editor