text-rendering

Setting what to optimize when rendering text.

Overview

Examples

Optimize legibility

Use text-rendering:optimizeLegibility for headings or short text where ligatures and kerning quality matter more than rendering speed.

<h2 class="text-rendering:optimizeLegibility">  Product analytics</h2>

@layer utilities {  .text-rendering\:optimizeLegibility {    text-rendering: optimizeLegibility  }}

Prefer speed for dense updates

Use text-rendering:optimizeSpeed in fast-updating or very dense surfaces when rendering performance matters.

<div class="text-rendering:optimizeSpeed">  Streaming log output</div>

Return to browser behavior

Use text-rendering:auto when the browser should choose the rendering strategy.

<p class="text-rendering:auto">Default rendering</p>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<p class="text-rendering:optimizeLegibility:hover text-rendering:auto@print text-rendering:auto@sm">...</p>