Skip to content
Typography & EditorialHectorpattern

Measure and Rhythm

Live axes for weight, optical size, and measure — type reviewed as a specimen, not a screenshot of a specimen.

Built here · no external address

Hector: Solid, honourable, high-craft work.

Exhibit case

Set in itself, at real size. Nothing here is a description.

Arming the exhibit…

Why it matters

Typography decisions made in Figma and verified nowhere else drift. A live specimen with sliders makes measure a number you can defend.

Key techniques

  • Controlled inputs writing font-weight, font-size, and max-width in ch.
  • Real Instrument Serif text, not lorem.
  • Chamber measure as the default ceiling.

What to steal

The transferable part.

ch for measure. It scales with the type, not the viewport.

What not to copy

Context-specific or costly.

Do not expose every variable axis in production. Three is enough to teach.

Inclusion rationale

Apollo's instrument — the chamber page and this entry share one specimen.

Technical register

Performance

No layout thrash beyond the text block; sliders are cheap.

Mobile

Stacked controls; specimen remains readable at 390px.

Accessibility

Labels include the live value; inputs are native ranges.