Typography

Typefaces

Three typeface families — sans-serif for UI, serif for editorial content, monospace for code.

Heading Scale

Headings create typographic hierarchy. Each size maps to an HTML element and a utility class.

Text Scale

Body text sizes for running copy, labels, and captions.

Font Sizes

All available size tokens. Each step follows a consistent scale ratio.

Font Weights

Numeric weight tokens available in the system.

Line Height

Line height tokens ensure readable vertical rhythm across all text sizes.

Fluid Typography

Large text sizes scale fluidly based on their container width using clamp() with cqi units. Unlike viewport-based scaling (vw), container-based fluid type works correctly in multi-column layouts, sidebars, and cards — text scales relative to its own container, not the window.

Line Heights

How it works

• Source: Typography (Liquid) Figma collection with Min/Max modes
• Container range: 320px → 1200px (inline-size)
• Below 320px container: locks to Min value; above 1200px: locks to Max value
• Between: interpolates linearly via clamp(min, preferred, max)
• Unit: cqi (container query inline) — scales with container, not viewport

Setup

For fluid tokens to work, an ancestor element must establish a container context:

.content-area {
  container-type: inline-size;
}

Usage

.hero-heading {
  font-size: var(--fluid-font-size-xxxl);
  line-height: var(--fluid-line-height-xxxl);
}

Use fluid tokens for headings and large display text. Body text and UI labels should continue using fixed-size tokens for optical precision at small sizes.

Why container-based?

Viewport-based fluid type (vw) breaks in multi-column layouts — a heading in a narrow sidebar would be the same size as in the main area. Container-based (cqi) scales text relative to its own content area, so a column at mobile width gets mobile-sized type regardless of the viewport.

Usage Guidelines