What Is Leading in Typography?

Leading (rhymes with “bedding,” not “feeding”) is one of the quietest tools in typography, yet it shapes how comfortable a block of text feels to read. Set it well and readers glide from line to line without noticing. Set it poorly and the page feels either cramped and claustrophobic or loose and disconnected. This guide explains what leading is, where the term comes from, why it matters, and how to adjust it in practice.

What leading actually is

In metal typesetting, each letter sat on its own small block of lead. To open up the space between lines, compositors inserted thin horizontal strips of lead alloy between the rows. More lead meant more space; the practice gave the technique its name. The lines themselves did not change, only the gaps between them.

In modern terms, leading is measured from one baseline to the next baseline, where the baseline is the invisible line that most letters sit on. If your type is 16 pixels and your leading is 24 pixels, there are 24 pixels from the bottom of one line of letters to the bottom of the next. Because the measurement spans baseline to baseline, it includes both the height of the text and the breathing room around it.

Designers often talk about leading as a ratio of the type size. Body text set at a line height of roughly 1.4 to 1.6 times the font size is a common, comfortable range for screens. A heading might use tighter leading, close to 1.1, because large type needs less space to stay legible.

Why leading matters

Leading affects three things readers feel immediately:

• Readability. Enough space lets the eye track cleanly to the start of the next line. Too little and lines blur together; too much and the connection between lines weakens, so the reader loses their place.
• Texture and color. Typographers describe the overall grayness of a text block as its “color.” Leading is one of the main levers for that: generous leading lightens the page, tight leading darkens it.
• Line length interaction. Long lines need more leading so the eye can find the next line easily. Short, narrow columns can tolerate tighter spacing.

Leading is not a one-size-fits-all number. A typeface with a large x-height (tall lowercase letters) usually needs a little extra leading, because the letters fill more of the line and the gaps look smaller. Light, airy typefaces can often use less.

How to set leading in CSS

On the web, leading is handled by line-height. You can express it as a unitless number, a length, or a percentage. The unitless value is almost always the best choice, because it scales with the element’s font size and is inherited sensibly by child elements.

body {
  font-size: 1rem;      /* 16px */
  line-height: 1.5;     /* 24px of leading */
}

h1 {
  font-size: 2.5rem;
  line-height: 1.1;     /* tighter for large display type */
}

A unitless line-height: 1.5 means each line gets one and a half times the current font size. If you instead write line-height: 24px, that fixed value is inherited by children even when their font size differs, which can cause overlap. The unitless form avoids that trap.

Practical guidelines

Treat these as starting points, not rules. Always test with your real typeface, your real font size, and your real line length. Widen the leading slightly for long lines; tighten it for short ones. If a paragraph feels hard to scan, adjusting the leading is often a faster fix than changing the font.

A few habits help. Keep body leading consistent across a page so the vertical rhythm stays steady. Avoid extremely tight leading on multi-line paragraphs, especially where letters have long ascenders and descenders that can collide. And remember that leading, line length, and font size work together: change one and you may need to revisit the others.

It also pays to test on real devices. A line height that reads comfortably on a large desktop monitor can feel cramped on a small phone screen, where lines are shorter and the eye travels less distance. Many designers nudge leading up slightly on narrow mobile layouts, then confirm the result on an actual handset rather than trusting a browser preview alone. The goal throughout is the same: a page that reads effortlessly, where no single line crowds its neighbor and no gap breaks the flow.

Leading versus other spacing terms

Leading is sometimes confused with related ideas. Tracking is the uniform horizontal spacing across a run of letters. Kerning is the adjustment of space between two specific letters. Leading is strictly the vertical space between lines. All three shape the feel of text, but only leading controls the gaps from row to row. Keeping the terms separate makes it easier to diagnose problems: if a block of text feels dense and hard to enter, the fix is usually more leading, whereas if individual words look awkwardly spaced, the issue is more likely tracking or kerning.

Frequently asked questions

Is leading the same as line-height?

In everyday web work they are treated as the same idea, but there is a subtle difference. Traditional leading was the extra space added between lines, while CSS line-height sets the total height of each line box, which includes the text itself. In practice, setting line-height is how you control leading on the web.

What is a good default line-height for body text?

A unitless value between 1.5 and 1.6 is a reliable starting point for paragraphs of running text on screens. Fine-tune from there based on your typeface, font size, and line length.

Why is it pronounced “led-ding”?

Because it refers to the metal lead. Hand compositors inserted strips of lead between rows of type, so the word is pronounced like the metal, not like the verb “to lead.”

Can leading be too much?

Yes. When lines sit too far apart, the eye struggles to connect one line to the next and the text stops reading as a unified block. Very open leading can work for short, stylistic passages but tends to hurt long-form reading.

Does leading change with font size?

If you use a unitless line-height, the leading scales automatically with the font size, which is usually what you want. Fixed pixel values do not scale and can cause overlap when font sizes vary, so prefer unitless numbers.