Optical Size

Optical sizing refers to adjusting letterform details based on the size at which type will be displayed. This is one of the oldest concepts in typography — punchcutters and type designers have always known that a letterform that works well at 72pt needs to be redrawn to work at 8pt. The features that look refined at large sizes (thin hairlines, tight spacing, fine contrast) become invisible or illegible at small sizes.

The traditional solution:

Historically, typefaces were drawn separately for different size ranges — "display," "text," and "caption" cuts of the same design. The display cut might have high stroke contrast and delicate serifs; the caption cut would have heavier stems, slightly wider proportions, and more open letterforms to survive small reproduction.

Optical sizing with variable fonts:

The opsz axis in variable fonts automates this process. As the type gets smaller, the font interpolates toward a "text" design; as it gets larger, it interpolates toward a "display" design:

/* Automatic optical sizing (recommended) */
body {
  font-optical-sizing: auto;
}

/* Manual control via font-variation-settings */
h1 {
  font-size: 4rem;
  font-variation-settings: "opsz" 64; /* 64pt optical size */
}

small {
  font-size: 0.75rem;
  font-variation-settings: "opsz" 12; /* 12pt optical size */
}

CSS optical sizing property:

/* Enable (default): browser uses font-size to set opsz axis */
.text { font-optical-sizing: auto; }

/* Disable: fixed opsz value, ignores font-size */
.logo { font-optical-sizing: none; }

With font-optical-sizing: auto, the browser automatically maps the computed font-size to the opsz axis range, so you get the right optical cut without manual intervention.

Source Serif 4 from Google Fonts is a well-executed example of a variable font with a robust optical size axis — compare the letterforms at 12px and 72px and you'll see measurably different contrast ratios and serif details. Fraunces also has a prominent opsz axis with dramatic design variation across its range.

Optical size is most impactful for serif typefaces where the thin hairlines in display cuts would become invisible at small sizes. For sans-serifs with low stroke contrast, the opsz axis typically adjusts spacing, x-height, and apertures — subtler changes, but still meaningful for legibility.