Token

Typography

Typography tokens define our type system including font families, sizes, weights, and line heights for consistent text styling.

Overview

Our typography system is built around the Outfit font family, a clean geometric sans-serif that provides excellent readability across all sizes. The system includes a comprehensive scale from tiny labels to large display text.

Font Family

We use a single font family with fallbacks for maximum consistency.

Primary The quick brown fox jumps over the lazy dog --font-family-primary

Font Stack

'Outfit', sans-serif

Outfit is loaded from Google Fonts. The sans-serif fallback ensures text remains readable while the font loads.

Font Sizes

A comprehensive type scale from 10px to 128px, covering everything from fine print to hero headlines.

--font-size-3xs 0.625rem (10px)

--font-size-2xs 0.75rem (12px)

--font-size-xs 0.8125rem (13px)

--font-size-sm 0.875rem (14px)

--font-size-md 1rem (16px)

--font-size-lg 1.125rem (18px)

--font-size-xl 1.25rem (20px)

--font-size-2xl 1.5rem (24px)

--font-size-3xl 1.875rem (30px)

--font-size-4xl 2.25rem (36px)

--font-size-5xl 3rem (48px)

--font-size-6xl 3.75rem (60px)

--font-size-7xl 4.5rem (72px)

--font-size-8xl 6rem (96px)

--font-size-9xl 8rem (128px)

Font Weights

Nine weight options from thin to black for creating visual hierarchy and emphasis.

--font-weight-thin 100

--font-weight-extralight 200

--font-weight-light 300

--font-weight-regular 400

--font-weight-medium 500

--font-weight-semibold 600

--font-weight-bold 700

--font-weight-extrabold 800

--font-weight-black 900

Recommended Weights

Body text: regular (400) or medium (500)

Headings: semibold (600) or bold (700)

Labels/Captions: medium (500)

Display text: bold (700) or extrabold (800)

Line Heights

Line heights are paired with font sizes to ensure optimal readability. Each size has a corresponding line height.

Tight (1.25)

The quick brown fox jumps over the lazy dog. This demonstrates tight line height, suitable for headings and short text.

Normal (1.5)

The quick brown fox jumps over the lazy dog. This demonstrates normal line height, ideal for body text and longer paragraphs.

Relaxed (1.75)

The quick brown fox jumps over the lazy dog. This demonstrates relaxed line height, useful for improved readability in dense content.

Usage

Use typography tokens to maintain consistency across your application.

Basic Usage

.heading {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-3xl);
}

.body {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-md);
}

.caption {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--foreground-muted);
}

Pairing Sizes with Line Heights

For optimal readability, pair each font size with its corresponding line height token:

/* Each size has a matching line-height */
font-size: var(--font-size-lg);
line-height: var(--font-line-height-lg);

font-size: var(--font-size-2xl);
line-height: var(--font-line-height-2xl);