Typography

The scale is a density decision and the faces are a fonts one: this page shows what a shape reads, not what it is worth today. Switch the fonts axis in the debug panel and everything below is set in another face without a rule changing.

Families

Three, because that is what a page tells apart: what it is written in, what it is titled in, and what is meant to be read as typed rather than said. A set may give the same face to all three — the system one does.

--font-family-base

The quick brown fox jumps over the lazy dog — 0123456789

--font-family-heading

The quick brown fox jumps over the lazy dog — 0123456789

--font-family-mono

The quick brown fox jumps over the lazy dog — 0123456789

Weights

Named by how much they insist, never by number. A face whose 500 does not exist maps it onto what it does have, and the shapes that ask for a medium go on asking for a medium.

--font-weight-normal — The quick brown fox jumps over the lazy dog — 0123456789

--font-weight-medium — The quick brown fox jumps over the lazy dog — 0123456789

--font-weight-strong — The quick brown fox jumps over the lazy dog — 0123456789

--font-weight-bold — The quick brown fox jumps over the lazy dog — 0123456789

Type scale

Design System — Building blocks for great interfaces

Used once per page. Sets the primary context. Paired with a short lead paragraph.

Typography establishes hierarchy and rhythm

Section-level heading. Groups related content. Usually followed by body text or sub-sections.

Spacing and proportion shape readability

Sub-section heading. Introduces a focused topic within a section.

Color and contrast guide the eye

Used for card titles, sidebar sections, or minor groupings.

Interactive states need to be obvious

Labels, metadata headers, small groupings. Subtle but distinct from body text.

Accessibility is a feature, not an afterthought

The smallest heading level. Use sparingly — for footnotes, legal blocks, or auxiliary labels.