Foundations · Typography

Foundations

Typography

Same four tiers as color. Alias exists only on the family axis — sizes, leadings, trackings, and weights don't have a useful intent-swap and compose from primitive to semantic directly.

Raw type values. Theme-agnostic. One primitive from each category — family, size, weight, line-height, tracking — composed together makes a complete style. Sizes are in rem so browser text-size preferences flow through (WCAG 1.4.4); line-heights are unitless, tracking is em, weights are numbers.

Family

--font-family-sans
Geist — the sans face. Body copy, meta, labels, captions.
--font-family-display
Work Sans — the display face. Headings and hero titles.
--font-family-mono
Geist Mono — the mono face. Code and token names in docs.

Size

--font-size-11
eyebrow.
--font-size-12
Reserved — no semantic consumer.
--font-size-13
label.small, code.default.
--font-size-14
body.small, label.large.
--font-size-15
Reserved — no semantic consumer.
--font-size-16
body.default.
--font-size-17
body.large min.
--font-size-18
title.small.
--font-size-20
title.default, title.large min, body.large max.
--font-size-22
display.small min.
--font-size-24
title.large max.
--font-size-26
heading.section min, heading.subsection max.
--font-size-28
heading.page min.
--font-size-32
display.small max.
--font-size-36
heading.section max, display.large min.
--font-size-40
Reserved — no semantic consumer.
--font-size-48
heading.page max.
--font-size-56
display.large max.

Line height

--leading-display
display.large, heading.page.
--leading-tight
heading.section, heading.subsection.
--leading-snug
title.large, title.default, title.small.
--leading-normal
body.small, label.*, code.default, eyebrow.
--leading-relaxed
body.large, body.default — long-form reading.

Letter spacing

--tracking-display
display.large, heading.page.
--tracking-heading
heading.section, heading.subsection, title.*.
--tracking-normal
body.*, label.*, code.default.
--tracking-caps-tight
Reserved — no semantic consumer.
--tracking-caps
Reserved — no semantic consumer.
--tracking-caps-wide
eyebrow.

Weight

--font-weight-regular
body.*, label.*, code.default, eyebrow.
--font-weight-medium
display.large, heading.*, title.*, <strong>.
--font-weight-semibold
Component-level only (ContextList keys).
--font-weight-bold
Reserved — not currently used.