The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text.

The browser makes trade-offs among speed, legibility, and geometric precision.

/* Keyword values */
text-rendering: auto;
text-rendering: optimizeSpeed;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;

/* Global values */
text-rendering: inherit;
text-rendering: initial;
text-rendering: unset;

Note: The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, macOS, and Linux.

One very visible effect is optimizeLegibility, which enables ligatures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, Microsoft's Calibri, Candara, Constantia, and Corbel, or the DejaVu font family).

Initial valueauto
Applies totext elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

auto
The 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.
optimizeSpeed
The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.
optimizeLegibility
The browser emphasizes legibility over rendering speed and geometric precision. This enables kerning and optional ligatures.
geometricPrecision

The 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.

In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the platform's font system. But if you request a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

But the geometricPrecision property — when fully supported by the rendering engine — lets you scale your text fluidly. For large scale factors, you might see less-than-beautiful text rendering, but the size is what you would expect—neither rounded up nor down to the nearest font size supported by Windows or Linux.

Note: WebKit precisely applies the specified value, but Gecko treats the value the same as optimizeLegibility.

Formal syntax

auto | optimizeSpeed | optimizeLegibility | geometricPrecision

Examples

Automatic application of optimizeLegibility

This demonstrates how optimizeLegibility is used by browsers automatically when the font-size is smaller than 20px.

HTML

<p class="small">LYoWAT - ff fi fl ffl</p>
<p class="big">LYoWAT - ff fi fl ffl</p>

CSS

.small { font: 19.9px "Times New Roman", "Georgia", "Palatino", serif; }
.big   { font: 20px "Times New Roman", "Georgia", "Palatino", serif; }

Result

optimizeSpeed vs optimizeLegibility

This example shows the difference between the appearance of optimizeSpeed and optimizeLegibility (in your browser; other browsers may vary).

HTML

<p class="speed">LYoWAT - ff fi fl ffl</p>
<p class="legibility">LYoWAT - ff fi fl ffl</p>

CSS

p { font: 1.5em "Times New Roman", "Georgia", "Palatino", serif }

.speed       { text-rendering: optimizeSpeed; }
.legibility  { text-rendering: optimizeLegibility; }

Result

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 2
The definition of 'text-rendering' in that specification.
Candidate Recommendation No change
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'text-rendering' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Non-standard
Chrome Full support 4
Notes
Full support 4
Notes
Notes This property is only supported on Windows and Linux.
Notes Initial versions had bugs on Windows and Linux that broke font substitition, small-caps, letter-spacing or caused text to overlap.
Edge ? Firefox Full support 3
Notes
Full support 3
Notes
Notes This property is only supported on Windows and Linux.
Notes The optimizeSpeed option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See bug 595688 for details.
IE No support NoOpera Full support 15Safari Full support 5WebView Android Full support 3
Notes
Full support 3
Notes
Notes From version 3 to 4.3, there is a serious bug where text-rendering: optimizeLegibility causes custom web fonts to not render. This was fixed in version 4.4.
Chrome Android ? Edge Mobile ? Firefox Android Full support 46Opera Android Full support 36Safari iOS Full support 4.3Samsung Internet Android ?
auto
Non-standard
Chrome Full support Yes
Notes
Full support Yes
Notes
Notes Chrome treats auto as optimizeSpeed.
Edge ? Firefox Full support Yes
Notes
Full support Yes
Notes
Notes If the font size is 20 pixels or higher, Firefox treats auto as optimizeLegibility. For smaller text, Firefox treats auto as optimizeSpeed. The 20-pixel threshold can be changed with the browser.display.auto_quality_min_font_size preference.
IE No support NoOpera ? Safari Full support Yes
Notes
Full support Yes
Notes
Notes Safari treats auto as optimizeSpeed. See WebKit bug 41363.
WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
geometricPrecision
Non-standard
Chrome Full support 13
Notes
Full support 13
Notes
Notes Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system.
Edge ? Firefox Full support Yes
Notes
Full support Yes
Notes
Notes Firefox treats geometricPrecision the same as optimizeLegibility.
IE No support NoOpera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.