CSS Letter Spacing & Line Height Generator
About this generator
Tune CSS letter-spacing and line-height across 8 element roles (h1 / h2 / h3 / body / small / caption / uppercase label / mono) and 8 font stacks (system / geometric / humanist / slab / modern serif / old-style serif / mono / display) — all at the same time. Pick one element to focus on; the others stay at their defaults until you tune them.
Goldilocks comparison — same text rendered at three line-heights side-by-side (tighter / current / looser). Click the one your eye prefers and the value updates. This is how real designers tune typography — by eye, against a reference.
Exports a complete CSS type system covering every tuned element. No login, no watermark, no paywall. Free and MIT-licensed.
Why use this Spacing Previewer?
How to use this previewer
Spacing reference
| Value | Use for | Why |
|---|---|---|
| line-height: 1.0 | Display only | Hero headlines at 48px+ where letters can almost touch. Anything smaller becomes unreadable. |
| line-height: 1.15 | Headlines | H1/H2 at 24-40px. Tight enough to feel deliberate, loose enough to breathe. |
| line-height: 1.5 | Minimum body | WCAG 2.1 AAA recommends 1.5 minimum for body copy. Below this, low-vision users struggle. |
| line-height: 1.6-1.7 | Comfortable body | Sweet spot for 14-18px body. Eye glides line-to-line without effort. Default for content sites. |
| line-height: 1.8-2.0 | Long-form | Long articles, novels, narrow measure. The extra leading gives the eye room to track. |
| letter-spacing: -0.02em | Tight headlines | Modern serifs and bold sans at large sizes can use slight negative tracking to feel deliberate. |
| letter-spacing: 0 | Body default | Never adjust tracking on body copy. Designers spent years tuning fonts at this baseline. |
| letter-spacing: 0.04em | Captions | Small text (10-13px) benefits from slight positive tracking to keep letters from cramming together. |
| letter-spacing: 0.12-0.18em | UPPERCASE labels | Uppercase needs significant extra tracking — letters were designed for sentence case spacing. |
Common typography patterns
.hero-title {
font-family: 'Geist', system-ui, sans-serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: 1.05;
letter-spacing: -0.02em;
font-weight: 800;
}body {
font-family: Georgia, 'Times New Roman', serif;
font-size: 17px;
line-height: 1.65;
letter-spacing: 0;
font-weight: 400;
}.eyebrow {
font-size: 11px;
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
}code, pre {
font-family: 'Geist Mono', 'JetBrains Mono', 'Fira Code', monospace;
font-size: 13px;
line-height: 1.7;
letter-spacing: 0;
}Pro tips
Frequently asked questions
Why side-by-side comparison instead of one preview?
Line-height is one of those properties where you tune by EYE, not by number. 1.5 vs 1.6 vs 1.7 line-height for body text — pick one in isolation and you'll guess; see all three side-by-side and your eye picks the right one in two seconds. This is the convergent way real designers tune typography (Apple HIG, Material Design, Stripe's type system all show comparative samples in their docs). The 'goldilocks' panel shows tighter / current / looser at the same font + size simultaneously.
Why 8 elements instead of just one?
Because real type systems have different LH/LS values per role. An h1 hero at 48px needs LH 1.05 (tight) and LS -0.02em (slight negative tracking) because at display sizes you want letters to feel coupled. Body text at 16px needs LH 1.6 and LS 0 because at reading sizes you want generous breathing room. UPPERCASE labels at 11px need LH 1.4 and LS 0.16em because tightly-packed caps are unreadable. Tuning one element at a time misses the systemic relationship; this generator shows all 8 roles in one place.
What's the difference between letter-spacing in px vs em?
px is absolute — letter-spacing: 2px is 2 pixels regardless of font size. em is relative — letter-spacing: 0.1em is 10% of the current font-size. For a type system, use em: a single value like 0.16em works on an 11px caption and an 18px UI label without recalculation. For pixel-perfect headlines where you've tuned by eye, px is fine. The generator outputs em (the convergent design-system choice).
Why is my body text 1.6 line-height? Isn't 1.5 the standard?
Both work; 1.5-1.7 is the comfortable range for body text. Older recommendations (1.5) came from text rendered at 12-14px on lower-DPI screens. Modern body text at 16-18px on Retina/4K screens reads better at 1.6-1.7 because the larger letters need slightly more vertical breathing room. WCAG 2.2 recommends ≥1.5 as the minimum for accessibility. The generator defaults to 1.6 for body; tune by eye via the goldilocks comparison if your specific font + size needs adjustment.
What's negative letter-spacing for headlines?
Display fonts at large sizes (>= 36px) often feel 'spaced out' because the same typeface that reads well at 16px has tracking optimized for body text. Negative letter-spacing (-0.01em to -0.03em) tightens the headline so letters feel coupled into words. Apple HIG uses -0.022em on large titles; Stripe uses -0.025em on heroes; Linear uses ~-0.03em. The generator's h1 / h2 presets ship sensible negatives; tune by eye to taste.
Is this free for commercial use?
Free, MIT-licensed, zero attribution required, no watermark, no signup. Use on any project — personal, client, enterprise — without permission.