Typography - Trezor Design

Font Families

Primary Inter The quick brown fox jumps over the lazy dog All UI text, headings, body copy

Monospace JetBrains Mono The quick brown fox jumps over the lazy dog Code snippets, tokens, technical values

Type Scale

4xl / 56px Page Title

3xl / 40px Section Heading

2xl / 28px Subsection

xl / 22px Card Title

lg / 18px Lead paragraph text for introductions

base / 15px Body text for readable paragraphs and descriptions

sm / 13px Secondary text, captions, labels

xs / 11px Overlines, badges, micro text

Line Height

Usage	Value	When to use
Tight	1.15	Headings, display text
Normal	1.5	Body text, paragraphs
Relaxed	1.75	Long-form reading

CSS Variables

typography.css css

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  --text-xs: 0.6875rem;    /* 11px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.375rem;     /* 22px */
  --text-2xl: 1.75rem;     /* 28px */
  --text-3xl: 2.5rem;      /* 40px */
  --text-4xl: 3.5rem;      /* 56px */
}