Typography
Font families, the type-size scale, weights, line-heights, and letter-spacing.
Typography tokens cover the families, sizes, weights, leading, and tracking that make Reva's text feel intentional. Each fontFamily token is a single bare family name — the web fallback stack is composed at consumption, not stored in the token.
Font families
Role-named families: text for body and UI, display for headings, numeric for tabular figures, mono for code, and the serif brand family for editorial moments.
Intelligent private banking for business owners
ABCDEFGHIJKLM · abcdefghijklm · 0123456789
Intelligent private banking for business owners
ABCDEFGHIJKLM · abcdefghijklm · 0123456789
£1,235,900.60 · 25 Dec 2025 · +13.56%
ABCDEFGHIJKLM · abcdefghijklm · 0123456789
API-first. Open architecture.
ABCDEFGHIJKLM · abcdefghijklm · 0123456789
Intelligent private banking for business owners
ABCDEFGHIJKLM · abcdefghijklm · 0123456789
Font sizes
A rem-based ramp spanning a micro band (3xs–2xs), a working band (xs–md), and a display band up to 9xl.
| Token | Value | Pixels | Description |
|---|---|---|---|
| 3xs | 0.625rem | 10px | Smallest text (10px) — micro band |
| 2xs | 0.6875rem | 11px | 11px — micro band |
| xs | 0.75rem | 12px | 12px — working band; = Tailwind xs |
| sm | 0.875rem | 14px | 14px — working band (+2px) |
| md | 1rem | 16px | Body text (16px) — working-band anchor |
| lg | 1.125rem | 18px | 18px |
| xl | 1.25rem | 20px | 20px |
| 2xl | 1.5rem | 24px | 24px |
| 3xl | 2rem | 32px | Heading size (32px) |
| 4xl | 2.5rem | 40px | Display size (40px) |
| 5xl | 3rem | 48px | Display size (48px) |
| 6xl | 4rem | 64px | Display size (64px) |
| 7xl | 4.5rem | 72px | Display size (72px) |
| 8xl | 6rem | 96px | Display size (96px) |
| 9xl | 8rem | 128px | Largest display size (128px) |
Font weights
| Token | Value | Description |
|---|---|---|
| regular | 400 | Regular weight |
| medium | 500 | Medium weight |
| semibold | 600 | Semibold weight |
| bold | 700 | Bold weight |
Line heights
Unitless multipliers — tight for display headings, loosening through body copy and UI.
Reva keeps advisors close to the work — clear hierarchy, calm surfaces, and copy that reads the way a person would say it out loud.
Reva keeps advisors close to the work — clear hierarchy, calm surfaces, and copy that reads the way a person would say it out loud.
Reva keeps advisors close to the work — clear hierarchy, calm surfaces, and copy that reads the way a person would say it out loud.
Reva keeps advisors close to the work — clear hierarchy, calm surfaces, and copy that reads the way a person would say it out loud.
| Token | Value | Description |
|---|---|---|
| tight | 1.15 | Tight leading for display headings |
| snug | 1.2 | Snug leading for section headings |
| normal | 1.3 | Standard leading for body text and subtitles |
| relaxed | 1.4 | Relaxed leading for smaller body text and UI elements |
Letter spacing
Tracking in em, from tightened display headings out to spacious uppercase labels.
| Token | Value | Description |
|---|---|---|
| tighter | -0.02em | Tighter tracking for display headings (40–64px) |
| tight | -0.01em | Tight tracking for large headings (24–32px) |
| normal | 0em | Neutral tracking for body copy (20–24px) |
| wide | 0.01em | Slightly open tracking for body text (18px) |
| wider | 0.02em | Open tracking for smaller body text (14–16px) |
| widest | 0.04em | Wide tracking for footnotes and captions (12px) |
| spacious | 0.1em | Very open tracking for uppercase small headings / labels (~12px) |