CSS Line Height: Comfortable Spacing for Body Text

A paragraph can have the right font size and still feel exhausting. Lines may merge into a gray block, accents may collide, or generous spacing may make every sentence feel disconnected. Line height controls the distance between baselines, not just the visible gap below letters. Treat it as a relationship between the typeface, the measure, and the reading task.

Establish a measurable starting point

Start with a real paragraph of roughly 150 words, not repeated placeholder text. Include capitals, punctuation, descenders, and at least one inline link. Use the px-to-rem converter to translate a design's font size into relative units before testing spacing. At a 16px reference root, an 18px paragraph becomes 1.125rem. That conversion describes size; it does not dictate a line-height ratio.

For ordinary Latin body text, 1.5 to 1.7 is a useful starting range, not a universal requirement. A compact interface label may need less, while a wide editorial column may need more. Compare candidates with the same text and width. Otherwise you cannot tell whether an improvement came from line spacing or an unrelated change.

Record the family, size, width, and ratio together. A value copied without those conditions is not a reusable typographic decision.

Understand what CSS actually inherits

Prefer unitless line height for general text rules. A number multiplies each element's own font size. A fixed length inherited from a parent can remain unexpectedly small when a child becomes larger. Percentages can also produce inherited computed lengths rather than the scaling behavior people expect. The MDN line-height reference explains these differences.

.article {
font-size: 1.125rem;
line-height: 1.6;
}
.article h2 {
font-size: 1.75rem;
line-height: 1.2;
}
.article p {
margin-block: 0 1em;
}

Here, an 18px paragraph has a 28.8px line box when the root is 16px. A 28px heading gets 33.6px instead. Neither calculation tells you the visible white space precisely: ascenders, descenders, and the font's internal metrics still matter.

Avoid assigning a fixed height to the paragraph's container. The text must be free to occupy more lines when readers enlarge it or when translations expand. Clipped text is a layout defect, not evidence that the spacing ratio was too generous.

Tune spacing against the line length

Place the paragraph in three widths: approximately 35, 60, and 80 average characters. Read several consecutive lines rather than judging the first sentence. A long return sweep makes finding the next line harder, and slightly more leading may help. A narrow column with the same leading can look unnecessarily fragmented.

Use line length and leading together. If a paragraph needs extreme line spacing to remain trackable, reduce its width before continuing. The responsive container guide provides useful layout context, but the final measure should still be judged with your actual typeface.

Check paragraph spacing separately. The space between paragraphs communicates a stronger break than the space between lines. Increasing both by the same percentage often produces a loose, disconnected page. Choose a paragraph margin after settling the line height, then inspect sequences of short and long paragraphs.

For lists, test wrapped items as well as single-line items. Readers should distinguish a continuation line from the next bullet. Solve that with item spacing and indentation rather than inflating all text leading across the site.

Give different text roles different treatment

Headings generally need tighter leading than body copy, particularly at large sizes. Start around 1.1 to 1.25 and test multi-line examples. A single-line heading hides collisions that appear when accents or descenders meet on adjacent lines. Never assume that uppercase display text represents every headline your editors will publish.

Labels and buttons need a different check. Their text may sit inside a control with explicit padding, so a large line height can make vertical alignment appear inconsistent. Keep a sensible text line box, then use padding to establish the target shape. Do not use line height as a substitute for all vertical layout.

Inline code, superscripts, and unusually tall fallback glyphs can expand individual lines. Inspect a paragraph containing each of them. A custom font might cover Latin letters but not mathematical symbols, causing a fallback face to alter the apparent rhythm. Consult MDN's inline formatting explanation when a line behaves differently from its neighbors.

Font metrics matter more than matching a number from another site. Recheck your chosen values whenever the family changes, even if the nominal font size stays identical.

Test the rhythm under realistic constraints

Build a short proof page with a heading, two paragraphs, a list, and a quotation. Inspect it at narrow and wide viewport widths, then enlarge text and increase browser zoom. Check whether lines remain distinguishable without forcing users to scroll sideways for ordinary prose. Read the text yourself; a screenshot review will miss tracking problems.

Also test user-adjusted spacing. The W3C text spacing explanation describes spacing overrides that layouts should tolerate. It does not require every design to use those values by default. This distinction prevents an accessibility test from becoming a misleading aesthetic formula.

Keep content-driven containers and avoid clipping rules that hide the result of larger text. If an enlarged label wraps, decide whether the component should grow or whether the copy needs editing. Reducing the reader's chosen size is not an acceptable repair.

When presenting alternatives, label specimens with their actual settings. Ask reviewers to read a paragraph and summarize it before discussing visual preference. Save the winning configuration alongside a representative specimen in your typography reference collection, including any exceptions for headings or compact metadata. That makes future changes testable rather than dependent on memory.

Key takeaways

• Start with real paragraphs, not isolated alphabet samples.
• Prefer a unitless ratio so inherited text scales predictably.
• Tune measure and spacing together instead of chasing one perfect number.
• Test wrapped headings, inline symbols, lists, and enlarged text.
• Record the conditions behind the value, not just the value itself.