Typography tokens cover font families, sizes, weights, and line heights.
Font Families
| Token | Value |
|---|
--pm-font-family-sans | system-ui, -apple-system, 'Segoe UI', Roboto, ... |
--pm-font-family-mono | ui-monospace, 'Cascadia Code', 'Source Code Pro', ... |
Font Sizes
| Token | Value |
|---|
--pm-font-size-xs | 0.75rem (12px) |
--pm-font-size-sm | 0.875rem (14px) |
--pm-font-size-md | 1rem (16px) |
--pm-font-size-lg | 1.125rem (18px) |
--pm-font-size-xl | 1.25rem (20px) |
--pm-font-size-2xl | 1.5rem (24px) |
--pm-font-size-3xl | 1.875rem (30px) |
Font Weights
| Token | Value |
|---|
--pm-font-weight-normal | 400 |
--pm-font-weight-medium | 500 |
--pm-font-weight-semibold | 600 |
--pm-font-weight-bold | 700 |
Line Heights
| Token | Value |
|---|
--pm-font-lineHeight-tight | 1.25 |
--pm-font-lineHeight-normal | 1.5 |
--pm-font-lineHeight-relaxed | 1.75 |
Usage
font-family: var(--pm-font-family-sans);
font-size: var(--pm-font-size-2xl);
font-weight: var(--pm-font-weight-bold);
line-height: var(--pm-font-lineHeight-tight);