The old typography is new again

Born of analog typesetting constraints, optical sizing is once again relevant in digital design

A graphic composition of oversized lowercase "h" letterforms layered in muted yellow, orange, and green on a dark textured background. Dashed guidelines running across the frame, small sliders labeled “min” and “max” tucked in the upper left corner, and partially visible text in the lower right, all suggest themes of measurement, contrast, and reinterpretation of type.

Now imagine holding a small block of metal type in one hand and a large block in the other. The larger type is more expressive, probably with more contrast between its thick and thin strokes. The smaller type is sturdier and simpler, with more consistent stroke widths, larger counters, and a higher x-height to keep it legible.

Those differences weren’t a stylistic flourish, but a physical necessity: At small sizes, ink spreads into counters, hairlines disappear into paper, and closely spaced letters collide. To keep type readable, punchcutters opened counters, thickened their thinnest strokes, widened spacing, and simplified fine detail. At large sizes, where legibility wasn’t at risk, the same letterforms could afford to be delicate, with more contrast and personality as a result.

Note the more uniform stroke width and higher bowl of the “a” character in ATF Garamond at 6pt and how that varies as size increases. Image adapted from an original by JAF.

A row of repeated lowercase “a” letterforms in black, shown at different optical sizes across a light background. Purple markers with vertical lines point to three labeled sizes—6pt, 14pt, and 72pt—illustrating how the shape of the letter subtly changes for readability at different scales.

For five centuries, every typeface size was its own unique design. What we now call optical sizing—the practice of adapting a typeface’s design for different sizes to keep it readable—is a modern attempt to preserve that deliberate design choice to honor size-specific type, even though the physical reasons for it no longer apply.

Optical sizing today

With phototypesetting, a single master design could be projected through lenses and film at any size, so it became cheaper to release a single design and scale it than to cut each size separately. Digital typesetting inherited that same logic: Font size became a matter of scaling outlines, rather than selecting a different drawing. A 10-point character and a 100-point character were identical shapes, just rendered at different sizes.

In a font with no optical size corrections, outlines stay in the same places.

A black background with two sizes of a lowercase “n” composed of vector outlines. The same control points, Bézier handles, and bounding boxes are visible around each letterform, highlighting how the curves and proportions of them are the same despite the size differences of the glyphs.

But identical shapes don’t read the same at different sizes. A high-contrast Didone typeface that looks elegant on a book cover becomes fragile when used as a caption. A sturdy text face built for paragraphs looks muted and nondescript when blown up to billboard scale. It’s also worth remembering that a billboard read from across a park, a TV viewed from the sofa, and a phone held at arm’s length can all present type at roughly the same perceived size, even though their font sizes differ wildly. It’s why we should always design for the eye and not just the canvas.

Lust Didone (top) and Verdana, in both large and small, show that identical shapes don’t read the same at different sizes.

A large black serif word “elegant” stretches across a soft gradient background; it's paired with oversized sans-serif words “muted & nondescript” beneath it. Supporting paragraphs explain how identical type shapes read differently at different sizes, illustrating the contrast between expressive display type and subdued text type.

Today, size-specific type design is finding its way back to the mainstream. In Size-specific adjustments to type designs (Just Another Foundry, 2014), Shoko Mugikura and Tim Ahrens document the adjustments that shaped 500+ years of metal type printing and make the case for carrying them into digital practice.

Common optical sizes, from largest to smallest, are display, subhead, text, and caption. The larger sizes earn their personality through finer detail, higher contrast, and tighter spacing; the smaller ones earn their legibility through sturdier stems, more open counters, looser spacing, and a higher x-height. If you’ve ever picked a font with “Display” in its name (like Playfair Display), you’ve already encountered this concept.

From top to bottom: Three optical sizes of Degular (Degular Display, Degular, and Degular Text), each set at 20pt and 100pt. Adapted from an illustration in Universal Principles of Typography.

Two columns of the word “optics” are stacked three-high in bold white type on a textured gray background to showhow spacing and letter shapes are adjusted for clarity and impact across sizes. The word is smaller in the left column, under the heading “20 pt," than it is on the right, under the heading “100 pt."

Optical sizing with variable fonts

Those named sizes are distinct designs, but a variable font with an optical size axis (opsz) offers something subtly different: a continuous slider between them, so the design can change gradually as size changes, rather than jumping between fixed steps. Unless turned off in the app’s preferences, Adobe InDesign automatically maps font size to the matching optical size value (60-point maps to 60 on the axis). Figma does the same, with a checkbox for automatic mapping.

Settings for automatically mapping font size to optical size in Adobe InDesign (left) and Figma.

Two interface panels on a light textured background indicate how optical sizing can be controlled and adjusted in design software. On the left, a preferences window highlights a checked option labeled “Map Optical Size to Font Size in Variable Fonts.” On the right, a variable font panel displays sliders for weight, softness, wonk, and optical size, with “Set optical size automatically” enabled.

Most web browsers behave this way, too: A font-size of 60 pixels translates to opsz: 60 without us needing to do anything. Relative units like rem first get translated to their pixel equivalent, then mapped to the opsz axis.

Typical browser behavior: Font size, defined using a relative unit (such as rem), is translated to a pixel-based value, and then assigned to the optical size axis.

On a soft gradient background and connected by a downward arrow is a size conversion from 1.125 rem to 18 px. Beneath it, also connected by a downward arrow, a line of code reads, “font-variation-settings: 'opsz' 18;” with the number highlighted, illustrating how optical size can be set manually in CSS for variable fonts.

But while it’s easy to let the software do the hard work, it’s also possible to take the wheel when you want a little more control. On my own site, where I use the variable version of OH no Type Co.'s Degular, I turn the automatic mapping off and set optical size deliberately at different viewport widths. In other words, I’m telling the browser that once the screen is wide enough, I want a specific optical size value—not the font size the automatic calculation would’ve provided.

@media screen and (min-width: 40rem) {
font-variation-settings: "opsz" 24;
}

How precise you need to be with this control depends on what you’re designing, but using variable fonts lets you transition smoothly through different optical sizes. Rather than rely on the more traditional delineations of display, body, etc., you can let the design respond to context.

Several variable fonts in the Adobe Fonts library have an opsz axis, including Degular, Adobe Aldine, Antonia, Corsario, Gimlet Sans, Sherborne, Sole Serif, and Zeitung Pro.

Six variable fonts with an optical size axis, shown at minimum (left) and maximum values. Note how the x-height is consistently higher at the minimum optical size setting (intended for display at small sizes).

Split layout on a dark background shows two “Optical size” sliders labeled “min” and “max” at the top. Beneath them are repeated lines of the word “Handglove” with overlaid baseline and alignment guides, demonstrating how letterforms and spacing shift as optical size changes across a range.

Whether you leave optical sizing to automatic mapping or set it by hand, type feels appropriate to its context: more readable in long prose and more expressive at scale. Understanding this technique can change how we treat our type, even when a selected font doesn’t offer a variable optical size axis.

Good typography rarely announces itself, and optical sizing is a practice where a craft older than the printing press meets the most modern tooling we have. The method that serves the message best is the one worth reaching for.