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).
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 definition
Initial value | auto
|
Applies to | text elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
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 "Constantia", "Times New Roman", "Georgia", "Palatino", serif; }
.big { font: 20px "Constantia", "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 "Constantia", "Times New Roman", "Georgia", "Palatino", serif }
.speed { text-rendering: optimizeSpeed; }
.legibility { text-rendering: optimizeLegibility; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2The 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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome Full support 4 Full support 4 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 Full support 79 Full support 79 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. |
Firefox Full support 1 Full support 1 Notes' This property is only supported on Windows and Linux.
Notes' The |
IE
No support No |
Opera
Full support 15 |
Safari
Full support 5 |
WebView Android Full support 3 Full support 3 Notes' From version 3 to 4.3, there is a serious bug where |
Chrome Android Full support 18 Full support 18 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. |
Firefox Android
Full support 46 |
Opera Android
Full support 14 |
Safari iOS
Full support 4.2 |
Samsung Internet Android Full support 1.0 Full support 1.0 Notes' This property is only supported on Windows and Linux. Samsung Internet is not on Windows or Linux. |
|
Chrome Full support 4 Full support 4 Notes' Chrome treats |
Edge Full support 79 Full support 79 Notes' Edge treats |
Firefox Full support 1 Full support 1 Notes' If the font size is 20 pixels or higher, Firefox treats |
IE
No support No |
Opera Full support 15 Full support 15 Notes' Opera treats |
Safari Full support 5 Full support 5 Notes' Safari treats |
WebView Android Full support ≤37 Full support ≤37 Notes' WebView treats |
Chrome Android Full support 18 Full support 18 Notes' Chrome treats |
Firefox Android Full support 46 Full support 46 Notes' If the font size is 20 pixels or higher, Firefox treats |
Opera Android Full support 14 Full support 14 Notes' Opera treats |
Safari iOS Full support 4.2 Full support 4.2 Notes' Safari treats |
Samsung Internet Android Full support 1.0 Full support 1.0 Notes' Samsung Internet treats |
|
Chrome Full support 13 Full support 13 Notes' Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. |
Edge Full support 79 Full support 79 Notes' Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. |
Firefox Full support 1 Full support 1 Notes' Firefox treats |
IE
No support No |
Opera Full support 15 Full support 15 Notes' Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. |
Safari
Full support 6 |
WebView Android Full support 37 Full support 37 Notes' Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. |
Chrome Android Full support 18 Full support 18 Notes' Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. |
Firefox Android Full support 46 Full support 46 Notes' Firefox treats |
Opera Android Full support 14 Full support 14 Notes' Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. |
Safari iOS
Full support 6 |
Samsung Internet Android Full support 1.0 Full support 1.0 Notes' Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.'
- Non-standard. Expect poor cross-browser support.
- See implementation notes.'
- See implementation notes.
See also
- Drawing text in a
<canvas>
- CSS Text Decoration CSS module
- Related CSS properties
text-decoration
(and its longhand properties, such astext-decoration-line
,text-decoration-style
, andtext-decoration-thickness
)text-emphasis
(and its longhand properties, includingtext-emphasis-color
,text-emphasis-position
, andtext-emphasis-style
)text-shadow
text-transform
- The SVG
text-rendering
attribute - SVG and CSS
text-rendering by Mozilla Contributors is licensed under CC-BY-SA 2.5.