Optical Size Axis
The optical size axis adjusts how a typeface renders at different scales. Body text at 12 pixels gets open counters and lower contrast. Display at 80 pixels gets tight spacing and razor sharp details. All from the same file. It exists because traditional type design has always solved this with separate cuts and the web finally caught up.
It is not the same as font size. Optical size changes the actual design of the glyphs, not just their scale. A common confusion is assuming every font with an opsz axis delivers meaningful difference. Most afterthought implementations do not. Inter Display versus Inter Text is the canonical success case. Everything else is usually marketing fluff.
Apple Music ships San Francisco with optical size active. The transitions between large hero type and small UI labels feel seamless. The New York Times uses it in their custom variable serif so body and display stay in the same family yet render with appropriate sophistication. Figma applies the same thinking when they switch between Inter at UI sizes and Inter Display at headings.
Set font optical sizing to auto and let the browser handle it based on declared font size. For precision use font variation settings with the opsz tag and your target pixel value. The difference is visible only when the foundry did the work properly at design time.
Use the optical size axis when your brand needs one coherent voice from 12px body to 80px headlines. Skip it on simple UI kits or when the typeface treats it as a checkbox feature. The tradeoff is file size and complexity versus visual accuracy at every scale. Without it you are compromising one end of the spectrum and hoping nobody notices.
Test the visual difference at your actual sizes. Many fonts ship the axis but the change is so subtle it is not worth the bytes. Know which category you are buying before you commit.
Font makers who treat optical size as first class deliver magic. Everyone else is just adding sliders.
Optical size is what makes a single variable font feel like multiple expertly drawn masters.
Read the full guide
Related terms
Keep exploring
Variable font
A font file that exposes one or more axes (weight, width, slant, optical size, or custom) that can shift at runtime without loading additional files.
Static Font
A static font is a single-weight font file with fixed outlines and no axes. You need a separate file for every weight, width, or style you intend to use.
Optical Size
Optical size is a variable font axis that redraws letterforms for specific rendering sizes, delivering sturdy readable shapes at 11px and refined high-contrast forms at 72px from the same file.