Text Rendering Tester

The text-rendering property tells the browser's text layout engine how to balance speed, legibility, and geometric precision when rendering text. It's particularly important for controlling ligatures (combined character forms like fi, fl, ff), kerning (spacing between letter pairs), and overall glyph rendering quality. Originally an SVG property, it's now widely supported in CSS across all modern browsers.

Use optimizeLegibility for headings, body text, and any static content where readability is paramount. It enables ligatures, kerning, and sometimes advanced font features — making text look more professional and polished. This is the recommended value for most web content. However, avoid it on animating text or very large dynamic tables, as the extra processing can cause slight performance overhead. For mobile, most browsers already default to this behavior.

Use optimizeSpeed when rendering performance matters more than visual quality. This disables ligatures and kerning, reducing the computational work the browser needs to do. It's useful for rapidly updating text (like live tickers, real-time data feeds, or typing animations), very large data tables with thousands of text nodes, or SVG charts where text changes frequently. On modern hardware, the performance difference is often negligible for typical web pages.

geometricPrecision prioritizes exact glyph shapes and spacing over speed or legibility enhancements. The browser renders each character with precise geometric fidelity — useful in SVG graphics, CAD applications, maps, and technical illustrations where text must align perfectly with geometric elements. It disables hinting and may cause text to appear slightly thinner or less crisp on low-DPI screens. Note: browser support for this value is less consistent than for the others; test thoroughly across target browsers.

text-rendering: optimizeLegibility is a broad switch that enables ligatures and kerning. For finer control, use font-feature-settings to toggle specific OpenType features. For example, font-feature-settings: "liga" off; disables standard ligatures even if text-rendering is set to optimizeLegibility. Conversely, you can enable ligatures manually with font-feature-settings: "liga" on; even under optimizeSpeed. Think of text-rendering as a high-level preference and font-feature-settings as the precise override.

Ligatures are combined glyphs that replace certain character pairs for better visual flow. Common examples: fi (f+i), fl (f+l), ff (f+f), ffi (f+f+i), and ffl (f+f+l). Without ligatures, the dot of the 'i' can collide with the top of the 'f', and adjacent 'f' characters may look awkwardly spaced. Ligatures solve these issues, making text more readable and aesthetically pleasing. Serif fonts benefit most noticeably, which is why the preview above defaults to a serif-friendly environment.

All modern browsers support auto, optimizeSpeed, and optimizeLegibility. geometricPrecision has weaker support — it works in Chrome, Edge, and Firefox, but Safari may treat it as auto. Mobile Safari on iOS often defaults to optimizeLegibility-like behavior regardless of the declared value. For production, always test across your target browsers. A safe fallback pattern: use text-rendering: optimizeLegibility; for modern browsers and rely on auto as the default for older ones.