Optical size, and why 8pt is not 24pt shrunk
A caption and a headline want different letterforms, not the same letterform at two sizes. Foundries knew this when type was cut in metal, lost it when photocomposition arrived, and variable fonts have finally made it adjustable again.
Metal type was cut at every size it was going to be used at, and the small sizes were not the large ones reduced. They had shorter ascenders, sturdier hairlines, wider spacing and a larger x-height relative to the body. The punchcutter knew that a letter has to survive being small, and drew a different letter.
Photocomposition destroyed that. One drawing, scaled optically to every size, and two generations of readers got captions set in a face designed to be a headline.
What the axis does
The opsz axis in a variable font puts the compensation back. As the value drops the font thickens its thin strokes, opens its counters, widens its spacing and shortens its extenders. As it rises it does the reverse, because a headline can afford contrast that would disappear in a footnote.
Most implementations tie the axis to the rendered size automatically. Given a font whose axis runs from to , the browser sets
where is the used font size in points. That is all font-optical-sizing: auto means, and it is on by default.
What the compensation is made of
"A different letter" is four separate adjustments moving together, and each one is measurable on any face that carries the axis:
| At small sizes | At display sizes | Why |
|---|---|---|
| Hairlines thicken | Hairlines thin | a stroke below the pixel grid disappears |
| Counters open | Counters tighten | ink and pixels both close small apertures |
| Spacing loosens | Spacing tightens | crowded smalls merge; loose displays fall apart |
| x-height rises | x-height relaxes | the lower case does the reading at 9pt |
The table is also a checklist for faking it. A face with no opsz axis can still be set a half-step heavier and a touch looser in its small sizes, which is three quarters of what the axis would have done.
Why this project pins it instead
Because a variable axis costs bytes. Every axis a font ships carries a full set of interpolation deltas, and shipping across its whole range for a face that only ever renders between 13 and 40 points is paying for values nobody can reach. Pinning the axis and re-subsetting took the preloaded set here from 97.6 KB to 46.2 KB.
The trade is real and worth naming: pinned means one drawing again, chosen at the size the body text actually uses. A pinned face set as a 40pt headline is very slightly too heavy. Against half the bytes on every cold visit, on a page whose whole argument is that reading should be cheap, that is the correct side to be wrong on.
How to see it at all
Set a line at 8pt and the same line at 48pt, then scale the small one up in a screenshot until the two match. If the font has an optical axis and it is working, the blown-up small text is visibly sturdier — heavier hairlines, more space between letters. If the two are identical, the axis is either absent or pinned.