Optical Size

Optical size is one of the five registered variable font axes and the only one that reaches inside the actual glyph outlines and redraws them based on intended size. Metal type cutters understood this for centuries. A 6pt Caslon had fatter strokes, wider counters, and reinforced serifs to survive ink squash and low resolution. A 72pt headline cut could be delicate with tight spacing and hairline details because physics allowed it. The opsz axis revived that knowledge after digital fonts spent decades pretending one master fit every size. Released in the OpenType 1.8 spec in 2016, it stores multiple optical masters or delta data inside a single variable file. The browser or OS reads the axis value, usually expressed in points from 8 to 144, and interpolates the correct construction. In CSS you set it directly with font-variation-settings: 'opsz' 14 while pairing it with your font-size declaration. The default instance often sits around 12 or 14. Supporting systems like Apple platforms can infer the value automatically from context. This delivers the quality once only possible with separate static families for caption, text, subhead, and display without the six-file tax designers paid in 2010.

Optical size is not font-size scaling in CSS. Scaling one master larger or smaller preserves proportions that fail at extremes, leaving tiny text frail and giant text bloated. It is not automatic tracking or leading tweaks. Those are separate levers. It is not something every font offers because drawing multiple optical masters demands serious extra work from the type designer. Many free or older fonts on Google Fonts still ship without a meaningful opsz range. It is not a crutch for weak typography. A bad typeface with opsz enabled still looks bad. It is not equally useful at every size. The biggest shifts happen below 18px and above 48px. Between those values one well-drawn master often suffices. And it is not invisible in production. The difference between a generic scaled font and an optically correct one shows up immediately in readability, perceived polish, and brand trust once you test on actual devices at actual sizes.

Apple SF Pro remains the clearest concrete example in production. Every modern Apple OS ships SF Pro as variable and actively drives the opsz axis behind the scenes. At 11px system labels the font selects a low opsz value that opens counters in letters like a, e, and g, slightly raises the x-height, and reinforces joins so pixels do not clog on Retina displays. The same file at 52px for a navigation title shifts to higher opsz values. Stroke contrast increases, apertures narrow, spacing tightens, and the forms gain elegance that would look cartoonish if you simply scaled the small master up. Google copied the playbook with Roboto Flex. Load it on v-fonts.com, drag the opsz slider from 8 to 144, and watch the skeleton of the S and the terminals on the c actually change shape in real time. Linear rebuilt their interface font with a custom opsz axis calibrated to their dense dashboards at 12px and announcement banners at 48px. IBM did the same inside Plex so the corporate wordmark at billboard size shares DNA with 10px legal footnotes in cloud consoles. These are not theory. They ship to millions daily and the typographic improvement is measurable in both accessibility scores and user perception.

Use optical size when your system spans wide size ranges and you refuse to accept the quality drop of one-size-fits-all masters. Design systems at IBM, Shopify, Stripe, and Notion all activate it so 10px data tables stay crisp while 60px hero headlines stay refined from one variable request. Editorial products benefit too. Substack newsletters set body at opsz 16 for readability then jump to opsz 36 for pull quotes without loading extra files. In 2026 the tooling is mature. Run pyftsubset from Fonttools to strip unused opsz ranges and unused glyphs and your Latin subset with weight, italic, and optical size drops well under 100 KB. Always test at final sizes on final devices. What looks subtle in Figma becomes obvious on a 4K monitor or an OLED phone. Avoid optical size on projects that live in one narrow band such as most mobile SaaS tools stuck between 13px and 24px. One strong master is enough and the axis adds unnecessary file weight. Skip it on pure display faces meant only for 72px and above. Those fonts rarely contain small-size masters because they would never ship them anyway. Do not retrofit it into legacy static-only license deals from 2018 or earlier. The axis rewards mature long-lived systems, not one-off landing pages that launch next Tuesday.

Optical size proves variable fonts win by being smarter at every size instead of merely smaller on disk.