Line height and letter spacing control the space around and between letters. Small changes have a large effect on how comfortable text is to read. This guide explains both settings, how they interact with font size and line length, and the values that work as starting points.
Line height
Line height, called leading in print, is the vertical distance between lines of text. Too little, and lines blur together; too much, and the eye loses its place when jumping to the next line.
Starting values
- Body text: 1.4 to 1.7 times the font size. Start at 1.5 or 1.6.
- Headings: 1.05 to 1.3. Large text needs proportionally less space between lines.
- Interface labels and buttons: 1.2 to 1.3, often on a single line.
What changes the ideal value
- Line length. Longer lines need more line height so the eye can find the start of the next line.
- x-height. Fonts with tall lowercase letters fill more of the line and usually need slightly more line height.
- Size. As text gets larger, reduce the ratio.
Use unitless values in CSS
body { line-height: 1.6; } /* good: scales with each element's font size */
body { line-height: 24px; } /* avoid: headings inherit a fixed 24px */A unitless value is inherited as a multiplier, so a heading with a larger font size gets proportionally larger line spacing. A value with units is inherited as a fixed length, which often causes overlapping headings.
Letter spacing
Letter spacing, called tracking in print, adds or removes the same amount of space between all characters. Type designers carefully space their fonts for typical text sizes, so body text usually needs no letter spacing at all.
When to adjust it
- Large headings: a slight negative value, around −0.01em to −0.02em, can make big text look tighter and more cohesive. Display fonts designed for large sizes often need no change.
- Uppercase text: capitals are designed to sit next to lowercase letters, so words set entirely in capitals look cramped. Add about 0.05em to 0.1em.
- Small text: very small labels can benefit from a little positive spacing, around 0.01em to 0.03em.
Use em units so the spacing scales with the font size:
h1 { letter-spacing: -0.02em; }
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.8125rem;
}Line length
Line length, or measure, is the number of characters per line. A range of roughly 45 to 75 characters is a long-standing recommendation for comfortable reading of single-column text. In CSS, the ch unit is based on the width of the zero character in the current font and gives a convenient approximation:
.entry-content p { max-width: 68ch; }Paragraph spacing
Space between paragraphs should be clearly larger than the space between lines, so readers can see where a new thought starts. A margin of around 1em to 1.25em below each paragraph works with most line heights.
Accessibility: let users override spacing
WCAG 2.1 success criterion 1.4.12, Text Spacing, requires that content still works when users increase line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. In practice this means avoiding fixed heights on text containers and letting boxes grow with their content.
Try it
Open the Font Playground, paste a real paragraph, and move the line height and letter spacing sliders one at a time. Then use the Website Typography Preview to check the values in a full layout with a controlled line length.