Typography is infrastructure. This lab pairs a sans-serif workhorse for technical UI with a characterful serif for editorial moments. The scale is mathematical — stepping cleanly from captions to display headlines — tested in real UI components under live contrast conditions.
Preview
Quality from the interface to the code.
Senior Director, Digital Platforms at Spectrum. Still builds the team that builds.
Every typeface here is judged in place — on the real background, next to the real accent, at the sizes the site will actually ship. A pairing that looks sharp in isolation can go flat against the brand's near-black; this stage exists so that never happens twice. Pick the workhorse, pick the voice, then lock it.
Type scale
Every named step, set at its real computed size, in the role's actual family/weight — display & headings follow the heading-driver toggle, body/small/caption stay on the sans workhorse.
The core three-voice system: a sans-serif workhorse for technical UI, a serif for display moments, and a monospaced face for code.
Which family drives headlines?
Switch the primary headline voice between the editorial serif and the technical sans-serif to evaluate tone across page types.
A geometric modular scale anchored on the 16px body base. Stepping proportionally from captions up to display headlines.
Computed scale (px)
Micro-typography controls for optical balance: font weight, proportional line height, and tracking across display, heading, body, and code roles.