Specimen · a sub-page of vehicle-page-structure

The control that inherited the wrong voice

Three typographic treatments of a page's one master control, measured against the version that was shipping — with the ink gaps computed live in your browser rather than asserted.

What was actually off

The button declares font: inherit and lives inside a <summary class="log-heading"> — so it inherits Newsreader, the editorial serif, at 9px. Every other micro-label on the same page is Atkinson: the nav at 13px, the receipt view-toggles at 11px. It is the only piece of UI chrome on the surface wearing the prose face, which is why it reads as borrowed from somewhere else.

Second, the + sits 0.77px below the optical centre of the capitals. Not a bug in the CSS — a font + centres on the maths axis, about half an x-height above the baseline, while capitals run baseline to cap-height. Set as text, it can never line up with caps; at 9px that 0.77px is ~9% of the cap height, which is what the eye catches. The variants draw the plus instead: two bars in a box exactly cap-height tall, baseline-aligned, so it spans precisely what the capitals span.

Third, and smallest, letter-spacing: 1.2px adds a trailing space after the final L, inside the padding — so symmetric padding: 3px 9px renders +0.36px right-heavy. Publishing the tracking as --tk and subtracting it from the right padding takes all three variants to 0.00px.

The specimens

Measured live

Ink gap = border inside edge to the first/last actual glyph outline, via canvas actualBoundingBox — not the element box, which is what hides the trailing letter-space in the first place.

Where each one belongs