Web Typography
Cheatsheet + Fluid Type Calculator
Dark
01
Fluid type — clamp() generator
Inputs
—
Click to copy
The quick brown fox
Full scale — uses your viewport settings
| Role | clamp() value | rem range |
|---|
01Type scale — desktop
H1 Page title
H2 Section heading
H3 Subsection title
H4 Component title
Body — the quick brown fox jumps over the lazy dog and keeps on going.
Small / caption — supporting text, labels, metadata
Eyebrow / Overline
02Line length & spacing
| Property | Value | Note |
|---|---|---|
| Ideal line length | 55–75 ch | scales with font in use |
| Max content width | 65ch | max-width: 65ch on prose |
| Body line-height | 1.6–1.7 | unitless — always |
| Heading line-height | 1.1–1.3 | tighter as size grows |
| Paragraph spacing | 1–1.5em | margin-bottom on p |
| Space after heading | 0.5–0.75em | closer to its content |
| Space before heading | 1.5–2em | separates from prior section |
| Min font size | 0.8125rem | 13px — never below |
| Base font unit | rem | respects browser accessibility prefs |
03Contrast & readability
| Role | Example | Ratio | WCAG |
|---|---|---|---|
| Body on white | #1a1a1a | 16:1 | AAA |
| Secondary text | #6b6b6b | 5.7:1 | AA |
| Placeholder / hint | #9ca3af | 2.5:1 | Large only |
| Min body text | 4.5:1 | — | AA required |
| Min large text | 3:1 | 18px+ or 14px bold | AA required |
04Responsive scaling
| Property | Value | Note |
|---|---|---|
| Mobile body | 0.9375rem | 15px — slightly larger than desktop |
| Mobile H1 | 1.625–1.875rem | 26–30px — scale down significantly |
| Fluid type method | clamp() | see Calculator tab |
| Breakpoint | 768px | common switch for type scale |
| Mobile line length | auto | remove max-width on small screens |
05Dos & don'ts
Do
Use rem for all font sizes
Limit to 2 typefaces per page
Use weight to create hierarchy
Set max-width on prose in ch units
Use unitless line-height
Test at 120% browser zoom
Left-align body copy
Don't
Use px for font-size (blocks a11y zoom)
Use more than 3 sizes in one component
Justify body text on the web
Go below 0.8125rem (13px)
Set line-height in px
Use light weights below 1rem
Centre-align long paragraphs
01The scale
spacing = n × 8px
where n = 0.5, 1, 1.5, 2, 3, 4, 6, 8, 10 — every spacing value should be a multiple of 8 (or 4 for micro-gaps).
4pxmicro gap, tight badge padding, icon offset0.25rem
8pxinline padding, chip gaps, icon-to-label0.5rem
12pxcompact list padding, tight label spacing0.75rem
16pxinput padding, small card gap, body margin1rem
24pxcard padding, between form fields, paragraph gap1.5rem
32pxsection internal spacing, modal padding2rem
48pxbetween content sections, hero sub-elements3rem
64pxsection vertical padding, generous breathing room4rem
80pxpage section breaks, hero top/bottom padding5rem
02On-grid vs off-grid
On grid
padding: 16px 24px
gap: 8px
margin-bottom: 32px
padding: 4px 8px
margin-top: 48px
border-radius: 8px
Off grid
padding: 15px 22px
gap: 10px
margin-bottom: 30px
padding: 5px 9px
margin-top: 50px
border-radius: 6px
When something feels slightly off but you can't explain why, check for values like 10px, 15px, or 22px. Snapping to the nearest multiple of 8 fixes it almost every time.