1. css
  2. /properties
  3. /text-rendering

text-rendering

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:

ValueDescription
autoThe browser makes informed decisions on when to optimize speed, legibility, and geometric precision when rendering text. Browser behavior varies.
optimizeSpeedThe browser prioritizes rendering speed, disabling kerning and ligatures when rendering text, which might affect legibility.
optimizeLegibilityThe browser prioritizes legibility, refining kerning and enabling ligatures, which can impact performance for larger text content.
geometricPrecisionThe 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.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer
SupportYes*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.

Useful Resources

Can I use: text-rendering

W3C SVG 1.1 Specification: The text-rendering Property

SVG 2 Working Draft: text-rendering

Managing Website Legibility Using text-rendering and its Alternatives