Should I use the legibility value or the default?

The default, in almost every case. The legibility value began as an instruction to enable kerning and ligatures, and current engines do that by default, so the two are reported as largely equivalent. The remaining difference is historical rather than visual, which is why the panel calls it a hint rather than a precise setting.

Why does light text on a dark background look bolder?

Because of how the text is rasterised. Subpixel antialiasing needs opaque dark text on a light surface, so light-on-dark text falls back to grayscale smoothing, which spreads the glyph slightly and makes the strokes read as heavier. The effect is not a weight change, which is why adjusting the weight to compensate can make light text look thin in another context.

What does geometric precision change?

It scales glyph outlines without hinting, so text stays smooth at fractional sizes and in transforms where hinted outlines would snap to pixel boundaries. That makes it useful in SVG and in scaled containers, and it costs some sharpness at very small sizes, where hinting exists precisely to keep stems crisp.

Is the speed value ever correct?

On very large amounts of text where rendering cost is the bottleneck, which in practice means it is almost never the right choice on the web. It disables kerning and ligatures, so spacing between letter pairs stops being corrected, which is visible immediately in a face with strong kerning pairs. The panel labels it rarely correct for that reason.

Why does the same CSS render differently on another machine?

Because rasterisation is a platform behaviour. The values the tool sets are honoured differently, or partly ignored, by each engine, and the operating system's own text stack sits below that. Two machines can render the same weight with visibly different stroke thicknesses, which is why the small-size comparison and the dark pane are worth checking rather than assuming.

Font Rendering Preview

Rendering settings

Font family

Sample text

Sizepx

Weight

text-rendering

autooptimizeLegibilitygeometricPrecisionspeed

text-renderingoptimizeLegibility

Smoothinggrayscale (antialiased)

EffectEnables kerning and optional ligatures

Dark on light · antialiased

Rendering: hinting, smoothing and subpixel order

Light on dark (grayscale only)

Rendering: hinting, smoothing and subpixel order

Subpixel antialiasing requires opaque dark text on a light background. Light-on-dark text is always rendered with grayscale antialiasing, which is why light type appears optically heavier on the same weight.

Small-size comparison

11px — Rendering: hinting, smoothing and subpixel order

13px — Rendering: hinting, smoothing and subpixel order

15px — Rendering: hinting, smoothing and subpixel order

css output

.rendering-demo {
  font-family: 'Inter', sans-serif;
  font-size: 1.7500rem;
  font-weight: 500;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

You Might Also Need

Font Previewer

Preview any font with custom text and sizes

Web Font Tester

Test web fonts live in your browser

CSS Font Stack Builder

Build robust font-family stacks

Waterfall Font Preview

See a font at every size at once

The font rendering preview shows the same string under each text rendering value and reports what the choice does in each engine. Browsers expose few controls over rasterisation, and the ones that exist matter most at small sizes and in light-on-dark settings.

What is Font Rendering Preview?

The font rendering preview renders a sample under each text rendering value, alongside a light-on-dark pane and a small-size comparison, and exports the declarations behind the combination.

Four rendering values are offered: the browser default, the legibility hint, the geometric precision value, and the speed value.
The default balances speed and shape fidelity, with kerning applied where the font provides it.
The legibility hint enables kerning and optional ligatures, and is reported as largely equal to the default in current engines because it began as a hint rather than a precise instruction.
Geometric precision scales glyph outlines without hinting, which is what makes text scale smoothly at fractional sizes.
The speed value disables kerning and ligatures together, and is described as rarely being the right choice on the web.

The second pane is the one that explains most rendering complaints. Subpixel antialiasing needs opaque dark text on a light background, so light-on-dark text is always rasterised with grayscale smoothing, and that is why the same weight looks optically heavier in a dark theme. The generated CSS therefore writes grayscale smoothing explicitly, which is the setting that keeps light-on-dark text from looking thick and slightly fuzzy. The small-size comparison at eleven, thirteen and fifteen pixels is the other half of the story: hinting and rasterisation differences are almost invisible at 28px and quite visible at 11px, so the value that looks identical in a large preview can change how a caption reads. Family, size and weight are all adjustable, since rendering behaviour differs with the weight of the strokes as well as with the engine. Every pane renders with the value currently in force, so the light-on-dark panel and the small-size rows are views of the selected setting rather than fixed reference comparisons.

The rendering values are hints to the engine rather than instructions, so two browsers may render the same value differently.
Font smoothing properties are non-standard even where they are implemented, and no engine outside the WebKit and Blink families honours them.
The preview always applies grayscale smoothing, so the subpixel path is described rather than shown side by side.
The small-size comparison uses three fixed sizes, so an intermediate size has to be judged by changing the main size slider.
Nothing reports the platform the page is being viewed on, and macOS, Windows and Linux rasterise text differently regardless of these values.

Use it when text looks too heavy in a dark theme, when a caption has to be checked at a small size, or when someone has proposed the speed value and the cost needs showing. The light-on-dark pane is usually the deciding one. Where the underlying face choice is the question rather than its rasterisation, the font previewer covers the setting, and where the loading behaviour is at fault the web font tester covers the fallback state. The CSS font stack builder assembles the family list the rendering applies to, the web font tester covers what the reader sees before the file arrives, and the system font stack generator covers the platform-native alternative.

How to use Font Rendering Preview

Choose the family, size and weight you want to judge, since rendering differences are smallest at moderate sizes and regular weights.
Switch between the four text rendering values and compare, keeping in mind that the differences are hints rather than guaranteed outcomes.
Read the light-on-dark pane and then the small-size comparison, which are the two contexts where the choice actually shows.
Copy the CSS, keeping the grayscale smoothing declaration if the design has a dark theme.

When to use Font Rendering Preview vs related tools

Reach for it when type looks too heavy on a dark background, when a small caption needs checking, or when someone proposes one of the exotic rendering values and the real effect needs demonstrating. It is also the fastest way to show why the same weight reads differently in light and dark themes. For the face itself, the font previewer covers the setting, the CSS font stack builder assembles the family list, and the web font tester covers the state before the webfont arrives.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.