Variable fonts with an optical size axis
Variable families that redraw themselves for the size they are set at: sturdier and looser when small, finer and tighter when large.
Small print, big type
In metal type every size was cut separately, and punchcutters adjusted the design as they went. Small sizes were made wider and sturdier with looser spacing so they would survive on the page; large sizes were refined, with thinner hairlines and tighter fit. Digital fonts lost this when one outline began to be scaled to every size. The optical size axis, tag opsz, brings it back.
In a font with this axis, the value normally corresponds to the size in points. At a low value the letters have a larger x-height, thicker thin strokes and more space between them. At a high value contrast sharpens and details become delicate. The practical result is that one family can serve as both text face and display face, and a caption stays readable without looking heavy.
Browsers apply the axis automatically: font-optical-sizing is set to auto by default, so a font that has the axis adapts to the font size with no extra code. You can also set it by hand to deliberately use the display design small or the text design large. Ranges differ widely between families, from a text-only adjustment of a few points to a span of over a thousand, and the notes give each one as recorded.
-
Inter
Optical size from 14 to 32 tunes a screen sans for small labels and larger headings, beside nine weights with italics.
-
DM Sans
Optical size from 9 to 40 on a low-contrast geometric sans.
-
Merriweather
A text serif whose optical size runs from 18 to 144, with weight and width axes.
-
Bricolage Grotesque
Optical size from 12 to 96, with ink traps exaggerated at the small end, beside weight and width.
-
Nunito Sans
A small-size optical range, 6 to 12, among four axes with weight, width and lowercase height.
-
Source Serif 4
Optical size from 8 to 60 in a transitional serif, with eight weights and italics.
-
Newsreader
An optical size axis from 6 to 72, with weights from 200 to 800.
-
Literata
A reading serif with optical size from 7 to 72, eight weights and italics.
-
Playfair
The widest optical range here, 5 to 1200, in a serif that also varies in weight and width.
-
Fraunces
Optical size from 9 to 144 beside weight, Softness and Wonky axes.
-
Bodoni Moda
A high-contrast serif whose optical size runs from 6 to 96.
-
Roboto Serif
Optical size from 8 to 144 among four axes, with weight, width and grade, and 18 named styles.
-
Roboto Flex
Optical size from 8 to 144 is one of 13 axes in a single file.
-
Pathway Extreme
Optical size from 8 to 144 in a grotesque sans, beside weight and width axes.
-
TikTok Sans
Optical size from 12 to 36 with weight, width and slant, four axes in a single file.
-
Hedvig Letters Serif
A single-weight brand serif whose only axis is optical size, from 12 to 24.
Samples load a basic Latin subset of each family. Every family here carries an open license; its page states the terms and offers the original files.
Questions about variable fonts with an optical size axis
What does optical size change in a font?
Stroke contrast, spacing, x-height and fine details. Small optical sizes are sturdier and more open; large ones are sharper and more tightly fitted.
Do I need to write CSS to use optical sizing?
Usually not. Browsers match the axis to the font size automatically. To override it, set font-variation-settings: "opsz" followed by a value within the font's range.
Which is better, an optical size axis or separate text and display fonts?
They achieve the same thing. The axis is more convenient, covers the sizes in between and needs only one file.