text-rendering Property
text-rendering is actually an svg property that provides text optimization information to the rendering engine while rendering text. Gecko and WebKit browsers have adopted text-rendering and allow it to be applied to html/xml content on Windows and Linux. Firefox in Windows automatically applies text-rendering:optimizeLegibility for text greater than 20px, Firefox for Mac has it always applied by default and Safari has it off by default for performance reasons. When set to text-rendering:optimizeLegibility enables ligatures in text that is 20px or smaller and also turns on kerning.
| Style Declaration | Style Definition |
|---|---|
text-rendering:auto |
Browsers will make educated guesses about when to optimize for speed, legibility and geometric precision when drawing the text. | text-rendering:optimizeSpeed |
Browser emphasizes rendering speed over legibility and geometric precision when drawing text; disables kerning and ligatures. Has no effect on Gecko 2.0 (Firefox 4) | text-rendering:optimizeLegibility |
Browser emphasizes legibility over rendering speed and geometric precision, enabling kerning and optional ligatures | text-rendering:geometricPrecision |
Browser emphasizes geometric precision over rendering speed and legibility; makes text that use non-linear scaling font aspects look good. Kerning is one font aspect that doesn’t scale linearly. Scaling text in svg can result in stair-step scaling, however when fully supported, text-rendering:geometricPrecision lets text scale fluidly. WebKit supports text-rendering:geometricPrecision but Gecko treats it the same as text-rendering:optimizeLegibility |
Note: using text-rendering:optimizeLegibility is not a silver bullet and it does come with certain cross-browser drawbacks:
text-rendering:optimizeLegibility, when used in unison withfont-variant:small-capscauses small-caps not to render in Chromiumtext-rendering:optimizeLegibilitycauses text to disappear completely in webOStext-rendering:optimizeLegibilitynegatively impacts page load; Use Caution, especially on mobile devices.text-rendering:optimizeLegibility, when used in conjunction withmargin,padding,border-width, oroutline-widthproperties which are set usingexmeasurement type in Safari 5 causes the browser to crash.