The CSS text-rendering Property

Overview

The text-rendering property, helps optimize the rendering of text by indicating to the browser how to prioritize between rendering speed, legibility, and geometric precision. Although it's not defined in any CSS standard, Gecko and WebKit browsers, such as Firefox, Chrome, Safari, and Opera, support this property on Windows and Linux. The property plays a crucial role in handling kerning pairs, ligatures, and the overall appearance of fonts, considering that most fonts today are vector-based rather than bitmap-based.

Examples and Usage

We'll explore the effects of text-rendering using the optimizeLegibility and optimizeSpeed values applied to the Calibri font at 20px size. Also, we'll use the word "difficult" to emphasize the impact on kerning pairs (such as "fi") and ligatures (such as "ff"). Keep in mind that other fonts may exhibit similar behavior.

HTML Structure

<p class="optimize-legibility">difficult</p>

<p class="optimize-speed">difficult</p>

CSS Styling

.optimize-legibility {
  font-family: "Calibri", sans-serif;
  font-size: 20px;
  text-rendering: optimizeLegibility;
}

Using optimizeLegibility in our example refines kerning, making the "fi" combination appear visually closer, and activates ligatures, transforming the "ff" combination into a single glyph.

Now, let's explore the optimizeSpeed value:

.optimize-speed {
  font-family: "Calibri", sans-serif;
  font-size: 20px;
  text-rendering: optimizeSpeed;
}

Applying optimizeSpeed prioritizes rendering speed over legibility, leading to faster text rendering at the expense of reduced kerning (characters appear further apart) and ligature use (the "ff" combination remains separate).

Values

The text-rendering property can accept the following values:

Value	Description
`auto`	The browser makes informed decisions on when to optimize speed, legibility, and geometric precision when rendering text. Browser behavior varies.
`optimizeSpeed`	The browser prioritizes rendering speed, disabling kerning and ligatures when rendering text, which might affect legibility.
`optimizeLegibility`	The browser prioritizes legibility, refining kerning and enabling ligatures, which can impact performance for larger text content.
`geometricPrecision`	The browser prioritizes geometric precision, improving the appearance of certain font aspects at the cost of rendering speed and legibility.

Associated Properties

font-feature-settings
font-variant-ligatures
font-kerning
text-decoration
text-decoration-line
text-decoration-style
text-decoration-thickness
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-shadow
text-transform

Tips and Tricks

Different operating systems and browsers each have their text rendering engines and defaults, so there is less guarantee that your font treatments will be displayed as intended on the user's system.
The auto value for the text-rendering property behaves differently across browsers. Some browsers, like Chrome, treat auto as optimizeSpeed, while others, like Firefox, may treat it as optimizeLegibility depending on the font size.
Consider your target audience and the devices they use when deciding whether to use the text-rendering property, as it may have varying effects on text appearance and performance. Testing across different browsers and devices can help with a consistent experience for your users.
Be cautious when applying optimizeLegibility on long pages or mobile devices, as it may cause significant performance issues, such as loading delays.

Browser Compatibility

Behavior in different browsers and operating systems varies heavily, and more detailed compatibility can be found in the first link of the useful resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.