Optical Size (opsz)
The optical size axis (opsz) in a variable font adjusts letterforms for optimal legibility at different sizes, small text needs more open counters and sturdier serifs; display text can use finer detail and higher contrast.
Example
In Practice
The opsz (optical size) axis adjusts letterform details based on the font size. At display sizes, it increases stroke contrast and refines serif details; at text sizes, it reduces contrast and enlarges apertures for better legibility. In CSS, optical size is set automatically when you use the font-optical-sizing: auto property. Source Serif 4 and Fraunces both expose this axis. Test it in the variable font tester.
Common Mistakes
The common mistake with most typographic terms is applying them without considering how they interact with other settings. Type is a system: changing kerning affects tracking, changing size affects leading, changing measure affects line-height. Test changes in context rather than in isolation.
Optical sizing, the axis nobody sets
Optical size is the quiet correction that makes text-designed-at-small look open and display-designed-at-large look refined. At a small opsz the letterforms open up: counters grow, strokes stop thinning, and low-contrast details win. At a large opsz the same design can carry fine hairlines and tight corners. Source Serif 4 ships this axis from 8pt to 60pt, so the family literally changes its drawing when set at 14px versus 48px.
Modern browsers apply the axis automatically through font-optical-sizing: auto, which picks the value from the font size you set. That is usually the right call, because designers rarely remember to switch opsz when a size changes. When the axis is present but the browser does not automate it, you can force it with font-variation-settings: "opsz" 24. The variable font tester is the place to see the correction working on real text at two sizes at once.
Try It
Open one of the Font Blend tools below to see Optical Size (opsz) applied to real text.