Typography Systems That Scale Across Products

A typography system is one of the most leveraged investments a product team can make. Get it right and it silently does the heavy lifting across every screen, every component, every handoff. Get it wrong and you spend years patching inconsistencies that compound with every new surface.

The Scale

A fluid, proportional scale — not an arbitrary list of pixel values — is the foundation. Build it around a base size and a ratio (Minor Third, Major Third, Perfect Fourth) and let the math do the work. Tools like Utopia make fluid responsive scales straightforward.

Semantic Roles, Not Raw Sizes

Name your tokens by role, not by size. --text-heading-lg is more durable than --text-32. Role names survive redesigns; pixel values do not.

Accessibility Baseline

WCAG 2.2 SC 1.4.4 requires text to be resizable to 200% without loss of content or function. A fluid type system built on rem units satisfies this automatically — no media query hacks needed.