Typography tokens for design systems: names, scales, and implementation

A type token name should help a team choose the right style. Names like display-lg, heading-md, body-sm, and caption can be easier to maintain than names that only describe a pixel value.

Value-based names can be useful in low-level systems, but product teams usually need semantic names that connect typography to actual interface use.

The strongest design handoff keeps the Figma style, token name, and CSS variable aligned. If a designer uses heading-lg, the developer should not need to translate that into an unrelated implementation name.

That alignment reduces mistakes and makes future scale changes easier because the relationship between design and code is visible.

A responsive token is less obvious than a fixed value. Teams should document the design viewport, minimum viewport, max viewport, and whether line-height is fixed, unitless, or fluid.

Without that context, a clamp value can look like a magic number. With the context, it becomes a maintainable design decision.