{text-rendering} Text Rendering Property | CSS: Presentation Layer
Standards Based Development
text-rendering:optimizeLegibility Setting
text-rendering:optimizeLegibility improves handling of kerning pairs and ligatures.
Firefox applies text-rendering:optimizeLegibility by default on font-sizes that are greater than 20px.
Safari 5 will crash if text-rendering:optimizeLegibility is applied in the following circumstances: applying a measurement value of ex on margin, border-width, and outline-width properties.
Cross-Browser Kerning-Pairs and Ligatures
Ligatures and kerning pairs
If supported, text rendering can be improved by enabling kerning pairs and ligature support. Add the following to body to enable it on all text:
text-rendering: optimizeLegibility;
Firefox’s default state (text-rendering: auto) partially enables this, optimizing legibility on font sizes above 20px. Using the above code will optimize all font sizes.
How To Optimize for Legibility Using Text Rendering
Text-rendering property has four settings:
- auto:
- browser chooses setting
- optimizeSpeed:
- Speed Optimization
- optimizeLegibility:
- Advanced Rendering
- geometricPrecision:
- Precise Rendering