Optical Sizing

Quick implementation

/* Enable optical sizing globally — works on variable fonts with an opsz axis */
* {
  font-optical-sizing: auto;
}

/* Override for cases where you want display-optimised forms at small sizes */
.logo-mark {
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 72;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a CSS typography expert. Explain and demonstrate font-optical-sizing in CSS.

Requirements:
1. Set font-optical-sizing: auto globally on * so variable fonts automatically adjust their opsz axis.
2. Show a side-by-side comparison: one column with font-optical-sizing: auto, one with none.
3. Display text at three sizes: display (3rem), body (1rem), and caption (0.75rem) in each column.
4. Explain what the opsz axis does: at small sizes, strokes get thicker and spacing opens up; at large sizes, strokes get finer and more elegant.
5. Show how to manually set font-variation-settings: 'opsz' 72 to force display-optimised forms regardless of size.

Use DM Sans or any Google Fonts variable font that has an opsz axis.
Output HTML + CSS only.

Why this matters in 2026

Traditional type design uses separate cuts — "caption", "text", "display" — each optimised for a specific size range, adjusting stroke contrast, spacing, and apertures. Variable fonts with an opsz axis replicate this automatically in the browser: as font size increases, strokes become finer and letterforms more elegant; as size decreases, strokes thicken and spacing opens up for legibility. Setting font-optical-sizing: auto globally activates this for free on any variable font that supports it.

The logic

font-optical-sizing: auto instructs the browser to automatically set the opsz font variation axis to match the computed font size in points. You can also control it manually with font-variation-settings: 'opsz' 72 — useful when you want display-optimised letterforms on a logo regardless of its rendered size. Fonts without an opsz axis silently ignore the property, so it is safe to apply globally.

Accessibility & performance

Optical sizing primarily benefits readability at small sizes — thicker strokes and more open apertures directly improve legibility for users with low vision or on low-resolution displays. There is no performance cost: the opsz axis is resolved at font rasterisation time by the same system that handles other variable font axes. The property is now supported in all major browsers and can safely be added to a global reset.