TYPOGRAPHY

Type tokens live in app/css/theme.css. Sizes use rem units, so they follow the reader's default font size.

Families

Token	Family	Use
Token`--font-mono`	FamilyJetBrains Mono 400 and 700, self-hosted	UseEverything except a visible `h1`
Token`--font-display`	FamilyInter, weight 900	UseA visible `h1`; an `sr-only` h1 uses the mono family so its page does not download Inter

Scale

Token	Utility	Size
Token`--text-xs`	Utility`text-xs`	Size12px below 768px; at least 13px from 768px
Token`--text-sm`	Utility`text-sm`	Size14px
Token`--text-base`	Utility`text-base`	Size16px
Token`--text-lg`	Utility`text-lg`	Size18px
Token`--text-xl`	Utility`text-xl`	Size20px
Token`--text-2xl`	Utility`text-2xl`	Size24px
Token`--text-3xl`	Utility`text-3xl`	Size32px
Token`--text-5xl`	Utility`text-5xl`	Size48px
Token`--text-7xl`	Utility`text-7xl`	Size64px

--text-min rises from 12px to 13px at 768px, and --text-xs uses it as a floor. Fixed pixel utilities do not inherit the floor, so use these tokens for small text.

Specimens

text-xs: the quick brown fox

text-sm: the quick brown fox

text-base: the quick brown fox

text-xl: the quick brown fox

text-3xl: the quick brown fox

SOURCE

<p className="ds-specimen text-xs">text-xs: the quick brown fox</p>
  <p className="ds-specimen text-sm">text-sm: the quick brown fox</p>
  <p className="ds-specimen text-base">text-base: the quick brown fox</p>
  <p className="ds-specimen text-xl">text-xl: the quick brown fox</p>
  <p className="ds-specimen text-3xl">text-3xl: the quick brown fox</p>

Headings

The base h1 is 32px, rising to 48px at 1280px. h2 is 20px, rising to 24px at 768px. h3 is 16px. Larger steps are for display text and chosen by the consumer.