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: revert; text-rendering: revert-layer; 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).