Typography

Font families, text styles and font tokens.

Usage

Components use the semantic tokens through their CSS variables; the primitives are only what they point to. Copy a variable from its card.

.title {
  font: var(--typography-heading-sm);
  letter-spacing: var(--letter-spacing-font-heading-sm-tracking);
}

Font families

DM Sans

font/family/sans

Weights the text styles use: 300 · 400 · 500 · 600 · 700 · 800

Fragment Mono

font/family/mono

Weights the text styles use: 400

Text styles

A text style is its --typography-* font shorthand plus its letter-spacing variable: the font shorthand cannot carry letter-spacing.

The quick brown fox jumps over the lazy dog

displayDM Sans · 800 · 64px / 88px

The quick brown fox jumps over the lazy dog

heading/2xlDM Sans · 700 · 48px / 68px

The quick brown fox jumps over the lazy dog

heading/xlDM Sans · 700 · 40px / 56px

The quick brown fox jumps over the lazy dog

heading/lgDM Sans · 600 · 32px / 44px

The quick brown fox jumps over the lazy dog

heading/mdDM Sans · 600 · 24px / 32px

The quick brown fox jumps over the lazy dog

heading/smDM Sans · 500 · 20px / 28px

The quick brown fox jumps over the lazy dog

body/mdDM Sans · 400 · 16px / 24px

The quick brown fox jumps over the lazy dog

body/md-emphasizedDM Sans · 500 · 16px / 24px

The quick brown fox jumps over the lazy dog

heading/xsDM Sans · 500 · 16px / 24px

The quick brown fox jumps over the lazy dog

label/lgDM Sans · 600 · 16px / 24px

The quick brown fox jumps over the lazy dog

body/smDM Sans · 300 · 12px / 16px

The quick brown fox jumps over the lazy dog

body/sm-emphasizedDM Sans · 500 · 12px / 16px

The quick brown fox jumps over the lazy dog

captionFragment Mono · 400 · 12px / 16px

The quick brown fox jumps over the lazy dog

label/smFragment Mono · 400 · 12px / 16px