text-rendering
Request a native text-rendering tradeoff without assuming an improvement.
Overview
| Class | Declarations |
|---|---|
text-rendering:auto | text-rendering: auto;
|
text-rendering:optimizeSpeed | text-rendering: optimizeSpeed;
|
text-rendering:optimizeLegibility | text-rendering: optimizeLegibility;
|
text-rendering:geometricPrecision | text-rendering: geometricPrecision;
|
text-rendering:<value> | text-rendering: <value>;
|
Examples
Optimize legibility
text-rendering:optimizeLegibility requests a rendering tradeoff favoring legibility. The property originates in SVG and is also applied to HTML text by browsers; an accepted value does not guarantee a visible change.
<!-- text-rendering:auto --><svg role="img" aria-label="AV office typography specimen" viewBox="0 0 240 64" class="block w:240px max-w:100%"> <text id="target" x="4" y="44" class="font-3xl text-rendering:auto fill-current">AV office</text></svg><!-- text-rendering:optimizeLegibility --><svg role="img" aria-label="AV office typography specimen" viewBox="0 0 240 64" class="block w:240px max-w:100%"> <text id="target" x="4" y="44" class="font-3xl text-rendering:optimizeLegibility fill-current">AV office</text></svg>Generated CSS
@layer utilities { .text-rendering\:optimizeLegibility { text-rendering: optimizeLegibility }}For explicit kerning or ligatures, use their dedicated font properties. Do not use this hint as a substitute for choosing and testing the font.
Request a speed-oriented rendering hint
text-rendering:optimizeSpeed requests a speed-oriented tradeoff. It is not evidence of faster rendering; benchmark the actual application before treating it as an optimization.
<!-- Native SVG rendering hint --><svg role="img" aria-label="AV office typography specimen" viewBox="0 0 240 64" class="block w:240px max-w:100%"> <text id="target" x="4" y="44" class="font-3xl text-rendering:optimizeSpeed fill-current">AV office</text></svg>Return to browser behavior
text-rendering:auto restores the browser’s default tradeoff. This paragraph resets an inherited legibility hint while its parent keeps that request.
<!-- Inherited hint · local auto reset --><div class="text-rendering:optimizeLegibility"> <p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-rendering:auto">AV office — a readable interface.</p></div>Apply conditionally
Hover or focus the button to request a different rendering strategy. The computed hint changes even on platforms where the visible glyphs remain the same.
<!-- Pointer and keyboard rendering hint --><button id="target" type="button" tabindex="0" class="font-xl text-rendering:auto text-rendering:optimizeLegibility:hover text-rendering:optimizeLegibility:focus-visible">AV office</button>