Typography

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

.my-heading {
  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);
}