@morev/css playground

Text rendering benchmark

The same text, font, width, and markup rendered with text-rendering: optimizeLegibility and text-rendering: optimizeSpeed .

Back to reset playground

Repeatable measurement

Render an identical large corpus

Each recorded run inserts fresh text into the same visible measurement area, then reads its geometry to force text shaping and layout. The order alternates, and every pair receives identical but newly identified text to reduce cache and first-run bias.

Ready. The benchmark can briefly load the CPU; start it when convenient.

Mode Computed value Style + shaping + layout Probe width Rendered height
optimizeLegibility
optimizeSpeed

Results will show the median of the recorded runs.

This intentionally measures synchronous style, shaping, and layout only. Page JavaScript cannot reliably time Paint or Rasterize Paint; use the isolated pages below for those events.

Inspect rendering in DevTools

Open each mode in its own tab. Start a Performance recording, then click “Re-render corpus”; scroll through the page to exercise painting of off-screen text.

Large text preview

Side-by-side output

Each column contains the same first 80 paragraphs from the measured corpus.

Legibility

optimizeLegibility

Speed

optimizeSpeed