Line Height and Letter Spacing: Readability Best Practices
Getting line height letter spacing right is what separates text that’s comfortable to read from text that quietly tires the reader. The defaults are simple: a unitless line-height of about 1.5 for body copy, a measure of 60–75 characters per line, and almost no letter-spacing on body text (the type designer already spaced it). This guide gives you the concrete numbers for body, headings, and small text, plus the few cases where adjusting tracking genuinely helps.
It’s part of our complete web typography guide, and it works hand in hand with the web font size guide — size and spacing always have to be tuned together. For the precise vocabulary of kerning versus tracking versus leading, see the typography spacing guide.
Line height (leading): the core numbers
Line height — historically called leading — is the vertical space from one baseline to the next. On the web, set it unitless (e.g. line-height: 1.5), not in pixels, so it scales proportionally with font size. The working ranges:
- Body text: 1.4–1.6. 1.5 is the safe default. Longer measures and smaller fonts lean toward 1.6; tighter, wider type can sit at 1.4.
- Headings: 1.1–1.25. Large type needs less breathing room; loose leading on a headline makes it fall apart.
- Captions / small text: 1.4–1.5. Small text needs proportionally generous leading to stay readable.
Why unitless matters: a fixed line-height: 24px won’t adjust if a child element changes size, leading to cramped or blown-out spacing. A unitless value multiplies against whatever the element’s font size is, so it always stays proportional — including when type scales fluidly across viewports.
Line length (measure): the 60–75 character rule
Line height and line length are inseparable. The longer the line, the more line height it needs so the eye can find the start of the next line. The well-established target for body text is a measure of 60–75 characters per line (including spaces). Too long and readers lose their place returning to the left margin; too short and the eye jumps too often, breaking rhythm.
Control measure with a max-width in ch units, which are roughly the width of a “0” in the current font:
max-width: 68ch;
This single declaration on your text container is one of the highest-impact readability fixes on the web. The most common failure on content sites isn’t font choice — it’s body text running the full 1200px+ width of a desktop layout at 120+ characters per line.
Letter spacing (tracking): mostly leave it alone
Letter spacing — uniform space added between all characters, properly called tracking — should be approached with restraint. A good text font is already spaced optimally by its designer at body sizes. Adding tracking to body copy almost always makes it harder to read, not easier. The defensible uses:
- All-caps text: add positive tracking (roughly
0.05em–0.1em). Capitals are designed to sit in mixed-case words; set as all-caps they look cramped without extra space. - Small text and labels: a touch of positive tracking (
0.01em–0.03em) can improve legibility at tiny sizes. - Large display headings: slight negative tracking (
-0.01em–-0.02em) can tighten oversized type that looks loose at large sizes. - Body text: leave it at
normal. Almost always.
Use em units for letter-spacing so the adjustment scales with the font size rather than staying a fixed pixel amount.
How size, leading, and measure interact
These three settings form a system; change one and you often need to adjust another:
| If you… | Then… |
|---|---|
| Increase the measure (longer lines) | Increase line height so the eye can track returns |
| Decrease font size | Slightly increase line height; small text needs more |
| Set text in all caps | Add positive letter-spacing |
| Use a tall x-height font | You can afford slightly tighter leading |
| Scale a headline very large | Tighten both leading and tracking |
Paragraph spacing vs line height
Don’t confuse line height (space within a paragraph) with paragraph spacing (gap between paragraphs). Both matter. A solid default is a paragraph gap of about 1em–1.5em (roughly one blank line), which signals a new thought without leaving the text feeling disconnected. Avoid using both a large bottom margin and a first-line indent — pick one convention. On the web, the blank-line gap is standard.
Common readability mistakes
- Tight body leading (1.2 or less) — lines crowd together and the text feels dense and slow.
- Full-width lines — no
max-width, so the measure blows past 90 characters. - Tracked-out body text — added letter-spacing on paragraphs, which reduces word cohesion.
- Loose headline leading — 1.5 line height on a large H1 makes the lines drift apart.
- Justified web text — without print-grade hyphenation, justification creates ugly rivers of white space; left-align instead.
- Fixed-pixel line height — breaks when font size changes; use unitless.
Adjusting spacing for different content types
The defaults above suit general body copy, but different content benefits from different settings:
| Content type | Line height | Measure / spacing notes |
|---|---|---|
| Long-form articles | 1.5–1.6 | 60–70ch, generous paragraph gaps |
| UI / dashboard text | 1.4–1.5 | Shorter measures fine; keep dense but legible |
| Marketing hero copy | 1.2–1.35 | Larger type, tighter leading, slight negative tracking |
| Data tables | 1.3–1.4 | Tighter rows; align numbers, avoid extra tracking |
| Code blocks | 1.45–1.6 | Monospace; never add letter-spacing |
The principle behind the table is consistent: as type gets larger, leading tightens; as type gets smaller or lines get longer, leading and breathing room increase. Code is the one place to be especially careful — monospace fonts are already evenly spaced by design, and adding tracking to code harms scannability rather than helping it.
Testing your spacing with real content
Spacing problems hide behind placeholder text. Lorem ipsum at a single size won’t reveal a measure that’s too long or leading that’s too tight, because it has no real headings, links, or paragraph variety. Always test with genuine content: a real headline, two or three full paragraphs, a list, and a blockquote. Then step back from the screen — if the body text blurs into an even, comfortable gray with clear paragraph separation, your spacing is working. If lines crowd together or the eye struggles to find the next line’s start, revisit leading and measure together rather than tweaking one in isolation.
A quick-reference recipe
- Body:
line-height: 1.5;max-width: 68ch;letter-spacing: normal;left-aligned. - H1–H2:
line-height: 1.15;optionalletter-spacing: -0.01em;on the largest sizes. - All-caps labels:
letter-spacing: 0.08em; - Captions:
line-height: 1.45;optionalletter-spacing: 0.02em; - Paragraph gap:
margin-bottom: 1.25em;
Frequently Asked Questions
What is the best line height for body text?
Use a unitless line-height between 1.4 and 1.6, with 1.5 as a safe default. Set it unitless rather than in pixels so it scales with font size. Longer lines and smaller text need values toward 1.6; tighter, wider type can sit at 1.4. Headings should use tighter leading, around 1.1–1.25.
Should I add letter spacing to body text?
No — leave body text at normal. Text fonts are already spaced optimally by their designer, and adding tracking usually makes paragraphs harder to read. Reserve positive letter-spacing for all-caps text, small labels, and captions, and use slight negative tracking only on very large display headings.
What is the ideal line length for reading?
Aim for 60–75 characters per line, including spaces, for body text. Control it with a max-width in ch units, such as max-width: 68ch. Lines that run the full width of a desktop layout are one of the most common and damaging readability mistakes on the web.
Why use unitless line height instead of pixels?
A unitless line-height multiplies against the element’s current font size, so spacing stays proportional even when the font size changes or scales fluidly across viewports. A fixed pixel line-height doesn’t adjust, which leads to cramped or blown-out spacing on differently sized child elements.
How much letter spacing should all-caps text have?
Add roughly 0.05em to 0.1em of positive letter-spacing to all-caps text. Capital letters are designed to sit within mixed-case words, so set as all-caps they look cramped without extra space. Use em units so the spacing scales with the font size rather than staying fixed.
Try it live: Use our free type scale calculator to generate a modular font-size scale and copy the CSS variables.
