Scale

Before photocomposition, every size of a typeface was cut separately. A punchcutter making a six point size did not simply shrink the twelve point drawing; they thickened the strokes so the letter would survive the ink, opened the counters so they would not fill in, and loosened the spacing so the letters would not merge. A large size got the opposite treatment: finer strokes, tighter spacing, sharper detail, because at that size the eye can resolve refinement and wants it.

Phototypesetting destroyed this. One drawing was projected at every size, and an entire dimension of the craft quietly disappeared for about fifty years. Variable fonts brought it back as an axis called opsz, and Source Serif 4 publishes it from 8 to 60. The instrument above sets the same three words at the same size in two panels, changing only that axis, which is the only way to see it: any comparison that also changes the size shows you the size.

Modern browsers will apply opsz automatically from the font size, which is what font-optical-sizing: auto means and it is the default. This is usually right and you should usually leave it alone. The reason to touch the axis manually is when the rendered size and the perceived size disagree — type reversed out of a dark field looks heavier than the same type on a light one, and pulling the optical size down slightly compensates. That is a real use. Setting opsz to a round number because it looks tidier in the CSS is not.

The failure mode this page exists to show is the one in the broken state: a display drawing at caption size. It is not a dramatic failure. Nothing collides, nothing overlaps, and a reviewer will not circle it. The text simply looks thin and slightly ill, and the reader concludes that the page is hard to read without ever being able to say why. Almost all typographic failure is like this. The loud failures get fixed.

Scale is also how this site builds hierarchy, because it has no colour to build it with. There are exactly three moves available: change the size, change the weight, or invert the field. That constraint is useful, because it forces the sizes apart. When you cannot tint a subhead grey to demote it, you have to make it genuinely smaller, and the page ends up with a clearer structure than it would have had with a palette to hide behind.

The practical version: pick a small number of sizes and use them consistently, rather than nudging each heading until it looks right in isolation. Two sizes that differ by ten percent read as a mistake. Two sizes that differ by forty percent read as a decision. If you cannot tell which of two levels is more important without reading the words, the scale is not doing its job and no amount of colour will rescue it.