Line Height and Text Spacing Best Practices

What line-height Controls

line-height sets the vertical space a line of text occupies, which directly affects how readable a paragraph feels. Too tight, and lines feel cramped; too loose, and text feels disconnected.

p {
  font-size: 1rem;
  line-height: 1.6;
}

Why Unitless Values Are Recommended

Writing line-height as a plain number (like 1.6) rather than a fixed unit means it is calculated as a multiple of that element's own font size. If a heading nested inside has a larger font size, its line height scales automatically instead of inheriting a fixed pixel value that no longer fits.

/* Recommended */
body { line-height: 1.5; }

/* Avoid: fixed value does not adapt if font-size changes on children */
body { line-height: 24px; }

Letter Spacing and Word Spacing

General Readability Guidelines

• Body text usually reads best around 1.5 to 1.6 line-height.
• Headings can use a tighter line-height (around 1.1-1.3) since they wrap less.
• Long lines of text (past roughly 75-80 characters) become harder to read no matter the line-height, so pairing spacing with a sensible max-width matters just as much.