CSS font-optical-sizing: inspect the font's size-specific drawings

When to use it

The same report family appears in a small footnote and a large case title. If the actual variable font contains an optical-size axis, leaving auto in place can produce drawings intended for each size. Explicitly declaring auto in the sample records the design decision, but it is not a substitute for checking the file. Compare the exact title and footnote at their production sizes and inspect strokes, counters, and line breaks on target devices. Do not lock a numeric opsz value for all sizes merely because a large heading looks attractive in a screenshot. A fallback font may respond differently or not at all. Keep the ordinary font-size and line-height rules responsible for readability; optical sizing changes glyph design, not semantic hierarchy, content, or zoom behavior. Test a print export too if the report is distributed as a document.

.case-report { font-family: 'Ledger Variable', system-ui, sans-serif; font-optical-sizing: auto; }
.case-report__title { font-size: 2.15rem; line-height: 1.15; }
.case-report__footnote { font-size: .82rem; line-height: 1.45; }

Cost and verification

The declaration itself adds little runtime work, while the font file and its fallback metrics dominate delivery and layout changes. A variable file with an opsz axis may be larger than a static alternative; measure the delivered subset. Optical sizing can alter glyph width enough to change wrapping, so verify the longest title and the smallest annotation after the real font loads. If the axis is absent, the rule is effectively inert. Avoid making the comparison with a substituted local font whose family name happens to match. Screen and print rasterization differ; judge legibility in the contexts that matter instead of assuming one screenshot settles it.

Common Mistakes

• Do not assume every variable font has an opsz axis.
• Do not hard-code one optical size for both footnotes and titles.
• Do not confuse optical sizing with font-size or line-height.

Connected lessons

• CSS Property Decisions
• CSS variable fonts: declare the supported weight range
• CSS readable type: set measure and rhythm before decorative details
• CSS font loading: keep content readable while a font arrives