Typography tokens

--wr-text-xs0.75rem · 12px · leading 1rem

--wr-text-sm0.875rem · 14px · leading 1.25rem

--wr-text-base1rem · 16px · leading 1.5rem

--wr-text-lg1.125rem · 18px · leading 1.75rem

--wr-text-xl1.25rem · 20px · leading 1.75rem

--wr-text-2xl1.5rem · 24px · leading 2rem

--wr-text-3xl1.875rem · 30px · leading 2.25rem

--wr-text-4xl2.25rem · 36px · leading 2.5rem

--wr-text-5xl3rem · 48px · leading 1

.card-caption {
  font-size: var(--wr-text-sm);
  font-weight: var(--wr-font-weight-medium);
  line-height: var(--wr-leading-normal);
  letter-spacing: var(--wr-tracking-normal);
}

.code-inline {
  font-family: var(--wr-font-family-mono);
  font-size: var(--wr-text-xs);
}

--wr-font-family-base

The quick brown fox jumps over the lazy dog — 0123456789

--wr-font-family-mono

const x = 42; // the quick brown fox — 0123456789

:root {
  --wr-font-family-base: 'Inter', system-ui, sans-serif;
  --wr-font-family-mono: 'JetBrains Mono', ui-monospace, monospace;
}

Type scale

Usage

Font families

Weight, line height, letter spacing

See also