midCSS
What is text-rendering and when is it useful?
Updated Apr 28, 2026
Short answer
It provides information to the rendering engine about what to optimize for when drawing text: legibility, speed, or geometric precision.
Deep explanation
Properties include optimizeSpeed, optimizeLegibility, and geometricPrecision. optimizeLegibility enables kerning and optional ligatures in the font file, making typography look significantly better at the cost of slightly more processing time.
Real-world example
Applying premium web typography to large headlines so that complex font ligatures (like 'fi' or 'fl') render beautifully.
Common mistakes
- Applying `optimizeLegibility` globally to all text (including thousands of words of body text), which can drastically slow down page rendering on older devices.
Follow-up questions
- Is text-rendering a standard CSS property?