typography-system-design

name	typography-system-design
description	Use when establishing or refining a typography system for a SaaS product or marketing site. Covers type stack selection, modular scale, line-heights, letter-spacing, and the type tokens every modern site needs. Includes the Inter/Geist/Söhne tradeoffs.

Typography System Design

A typography system is 80% of brand perception. Most SaaS sites use the same 3–4 fonts; the differentiation is in the system around them.

Choose ONE family for body, ONE for display, MAX

For 95% of SaaS sites, the answer is:

• Inter (Google Fonts, free, ubiquitous, neutral, excellent at all sizes)
• Geist (Vercel, free, slightly more character, very modern)
• Söhne (paid, premium, distinctive, used by Stripe and many others)
• GT America (paid, premium, more humanistic)

Use the SAME family for display and body unless you have a clear reason. The most boring choice is usually right.

Type scale (modular)

Pick a 1.25 (major third) or 1.333 (perfect fourth) scale, anchored on 16px body:

Token	Scale 1.25	Scale 1.333
xs	11px	11px
sm	13px	13px
base	16px	16px
lg	18px	20px
xl	24px	24px
2xl	32px	32px
3xl	48px	48px
4xl	64px	64px
5xl	80px	96px

The 1.333 scale gives more drama for headlines. The 1.25 scale is more conservative.

Line heights

Use	Line-height
Hero / display	1.05–1.1
Section headers (H2/H3)	1.2–1.25
Body	1.55–1.7
Captions	1.4–1.5
Code / monospace	1.5

Tighten display, loosen body. The biggest mistake is using one line-height everywhere.

Letter-spacing (tracking)

Use	Tracking
Display 48+ px	-0.02em to -0.04em (tighter)
H2/H3 24-32 px	-0.01em
Body 16 px	0
Caption 11-13 px	0 to +0.02em
All-caps labels	+0.05em to +0.15em (looser)

Display type tightens. All-caps loosens. Body stays neutral.

Weight ladder

Pick 3–4 weights and use them consistently:

• 400 — body
• 500 or 600 — emphasized body, secondary buttons
• 700 — headlines (H2, H3)
• 800 or 900 — hero display

Don't ladder more than 4 weights. Don't use italic for emphasis on display — use weight instead.

Common mistakes

• Two fonts that look almost-but-not-quite the same (Inter + Geist together is muddy)
• Hero text at 36px (too small for impact — modern hero is 48–80px)
• Body at 14px (too small for SaaS marketing — 16-17px is current standard)
• Line-height 1.5 on hero display (way too loose, makes display look bloated)
• Letter-spacing 0 on tiny all-caps (cramped and unreadable)

Where this fits in X3 Compass

X3 Compass uses Inter exclusively for everything. Type tokens are defined in brand/palette.css. Display uses font-weight 900 with letter-spacing -0.02em.