🔤

Typography Tokens

DTCG Type: typography

Typography tokens encompass font families, font sizes, font weights, line heights, and letter spacing. Together they define your type scale and ensure consistent text rendering across platforms.

Token Examples

Token Name	Value
`fontFamily.sans`	`'Inter', system-ui, sans-serif`
`fontFamily.mono`	`'JetBrains Mono', monospace`
`fontSize.xs`	`0.75rem`
`fontSize.base`	`1rem`
`fontSize.display`	`3.5rem`
`lineHeight.tight`	`1.25`

CSS Properties

These CSS properties typically consume typography tokens:

font-familyfont-sizefont-weightline-heightletter-spacing

Use Cases

✓

Heading hierarchy (h1-h6, display, hero)

✓

Body text (base, small, caption, overline)

✓

Code and monospace text

✓

Brand font stack

✓

Responsive type scaling

✓

Reading-optimized line heights

Usage Example

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-display: 3.5rem;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.display { font-size: var(--font-size-display); line-height: var(--line-height-tight); }

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Simple

Lightweight global-only tokens

Product / SaaS

Interactive product UI with semantic modes

Landing Page

Bold marketing with gradients and drama

Dashboard / Admin

Data-dense panels with chart colors

Mobile App

Touch-friendly native-feeling values

Email Template

Email-safe px units + web-safe fonts

Minimal

Under 20 tokens, bare essentials

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// fontFamily.sans → 'Inter', system-ui, sans-serif
// fontFamily.mono → 'JetBrains Mono', monospace
// fontSize.xs → 0.75rem
// fontSize.base → 1rem
// fontSize.display → 3.5rem
// lineHeight.tight → 1.25

// CSS custom property:
// --fontFamily-sans: 'Inter', system-ui, sans-serif;
// --fontFamily-mono: 'JetBrains Mono', monospace;

// Token set hierarchy:
// global/         → Raw primitive values
// semantic/light/ → Light mode semantic mapping
// semantic/dark/  → Dark mode semantic mapping
// component/      → Component-specific overrides