Optical sizing
Redrawing a typeface for its actual size, with sturdier small text and finer display type instead of one outline scaled up and down.
See it
What it is
Optical sizing changes the drawing for the size where type will be used, instead of merely scaling one outline. Small text cuts tend to have sturdier strokes, larger counters, and more generous spacing; display cuts can carry finer details, tighter spacing, and stronger contrast. Metal type did this naturally because every physical size needed its own set of punches. Apple rebuilt the same idea in software: San Francisco ships Text and Display cuts and swaps between them at 20 points.
Variable fonts can package those changes on the registered 'opsz' axis. In CSS, 'font-optical-sizing: auto' lets the browser select an optical size from the computed font size when the loaded font supports that axis. Reach for it when one family has to handle both body copy and large display type without either end looking compromised.
The gotcha is assuming the property invents optical sizes. It has no effect when the font lacks an 'opsz' axis, and a family with only static files still needs separate text and display cuts. Optical changes can also alter glyph widths and line breaks, so turn the feature on before you finish tracking, wrapping, and screenshot tests.
Ask AI for it
Load the Roboto Serif variable font with its 'opsz' axis and enable CSS 'font-optical-sizing: auto' for both article text and display headings. Set body copy at 17px with 1.55 line-height and headings at 64px with 1.05 line-height. Add a specimen toggle that switches 'font-optical-sizing' between 'auto' and 'none' without changing font size, weight, or tracking. Show enlarged crops of counters, serifs, and spacing at both sizes, and rerun line-wrap snapshots after enabling it because the optical variants may change glyph widths.