Summary
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.
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, Mac OS X 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 value | auto |
---|---|
Applies to | text elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* 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;
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.Hinweis: WebKit precisely applies the specified value, but Gecko treats the value the same as
optimizeLegibility
.
Formal syntax
auto | optimizeSpeed | optimizeLegibility | geometricPrecision
Examples
optimizeLegibility
automatically at 20px
<p class="small">LYoWAT - ff fi fl ffl</p> <p class="big">LYoWAT - ff fi fl ffl</p>
This demonstates how optimizeLegibility
is used by browsers automatically when the font-size
is smaller than 20px
:
.small { font: 19.9px 'DejaVu Serif', Constantia; } .big { font: 20px 'DejaVu Serif', Constantia; }
optimizeSpeed vs optimizeLegibility
<p class="speed">LYoWAT - ff fi fl ffl</p> <p class="legibility">LYoWAT - ff fi fl ffl</p>
p { font: 1.5em 'DejaVu Serif', Constantia; } .speed { text-rendering: optimizeSpeed; } .legibility { text-rendering: optimizeLegibility }
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'text-rendering' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support for Windows and Linux | 4.0[1] | 3.0[2] | No support | No support | 5.0 (532.5) |
Basic support for other operating systems | No support | No support | No support | No support | No support |
auto |
(Yes)[3] | (Yes)[4] | No support | No support | (Yes)[3] |
geometricPrecision |
13[5] | (Yes)[6] | No support | No support | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3[7] | 46 | No support | 36 | 4.3 |
auto |
? | ? | ? | ? | ? |
geometricPrecision |
? | ? | ? | ? | ? |
[1] The implementation has known bugs on Windows and Linux, which can break font substitition, small-caps, letter-spacing or cause text to overlap.
[2] The optimizeSpeed
option has no effect on Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), because the standard code for text rendering is already very fast and there is not a faster code path at this time. See bug 595688 for details.
[3] Chrome and Safari treat this as optimizeSpeed
. Work is continuing on WebKit bug 41363.
[4] If the font size is 20 pixels or higher, Gecko browsers use optimizeLegibility
; for smaller text they use optimizeSpeed
. The 20 pixels threshold value of the auto
keyword can be changed via the browser.display.auto_quality_min_font_size
preference.
[5] Supports true geometric precision without rounding up or down to the nearest supported font size in the operating system. Introduced in WebKit 535.1 WebKit bug 60317.
[6] Gecko treats the value the same as optimizeLegibility
.
[7] In Android Browser 3
- 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
.