Typography
Two families with strict roles, a scale that lives in tokens, and a line that stays at 68 characters.
The decision
- The problem
The system documented seven sizes. The stylesheet had 38.
- What I chose
The scale as tokens, two named steps for post subheadings and the logo, and the expressive sizes (the marquees, the giant call to action, the footer phrase) left in their component on purpose.
- Ruled out
A step for every component. Two sizes the eye can't tell apart are one size with a naming problem.
- What it cost
Some pieces moved a pixel or two. The smallest labels went from 11.5 to 12.8px, and read better for it.
Families
Three families with strict roles: Manrope for display, IBM Plex Mono for everything readable and every label, and Instrument Serif and Fraunces only inside the brand marquee. A second monospace was dropped: two nearly identical monos made no sense.
Scale
One large size for every hero and statement, one body size, one detail size. Every step is set in the same sentence on purpose: a scale is for comparing, and different words would hide whether a step looks small because it is small or because its line was shorter. Sizes are fluid: the pixel value is what this screen resolves to right now.
To watch the scale change with the screen, drag the width in the playground on Space and radius.
68 characters
Long-form text is measured in characters, not pixels. The essays ran at about 89 characters a line; now they hold 68. The column is written in ch, so the count stays the same when the type size changes.
Found by measuring
- A button label inherited the letter-spacing of a 111px statement: −0.02em became −2.22px on 12.8px type.
- The line mask of the big titles cut the descenders of g, y and p.
- Safari reflowed whole statements with text-wrap: pretty, where Chromium only fixes the last lines.
- The contact composer shipped at 15.2px, under the 16px floor that stops iOS from zooming on focus. It was built with new classes and never reached for the rule.