What is leading and what line height should you use?

Leading is the vertical space between lines of text, measured from the baseline of one line to the baseline of the next. The word comes from the strips of lead that printers placed between lines of metal type to space them apart. On the web, leading is controlled with the CSS line-height property. For body text, a unitless line height between about 1.4 and 1.6 works for most typefaces, with 1.5 a good default that also matches the WCAG text spacing guideline. Headings usually need less, around 1.1 to 1.3, because large type with body-text spacing looks loose and disconnected. Always set line-height as a unitless number so it scales correctly with each element's font size.

Line height has a bigger effect on readability than almost any other single setting. Too tight and lines crowd together, making it hard to follow the text; too loose and paragraphs lose their shape and the eye struggles to find the next line. In this article you'll learn how leading works in print and in CSS, how browsers distribute line height, how to choose values for body text, headings and interfaces, why unitless values matter, and how newer CSS features help you control the space around text.

Leading in Print and on the Web

In metal typesetting, each piece of type sat on a body slightly taller than the letters themselves. Setting lines with no extra strips was called setting solid. Adding a two-point strip of lead between lines of 10-point type gave 12 points from baseline to baseline, written as 10/12 and spoken as "ten on twelve".

Digital design tools kept the term. In applications like Adobe InDesign, leading is still measured baseline to baseline, so 10/12 means 10-point type with 12 points of leading.

CSS works differently. line-height sets the height of each line box, and the browser places the text in the middle of it. The extra space, the difference between the line height and the font's content area, is split equally above and below the text. This is called half-leading.

For a single line of text with font-size: 20px and line-height: 1.5, the line box is 30px tall. Between two consecutive lines, the baseline-to-baseline distance is also 30px, so in practice the result matches the print idea of 20/30.

Why the First Line Has Extra Space on Top

Because CSS adds half-leading above the first line and below the last, a paragraph's box is taller than its visible text. With large line heights, this extra space can make elements look misaligned with neighbouring images or boxes. More on fixing this later in this article.

How to Write line-height in CSS

line-height accepts several kinds of values:

p {
  line-height: 1.5;      /* unitless number: recommended */
}

.example-em {
  line-height: 1.5em;    /* length relative to this element's font size */
}

.example-px {
  line-height: 24px;     /* fixed length */
}

.example-percent {
  line-height: 150%;     /* percentage of this element's font size */
}

.example-normal {
  line-height: normal;   /* browser default based on the font's metrics */
}

They look equivalent on a single element, but they behave very differently when inherited.

Why Unitless Values Matter

When you use a unitless number, child elements inherit the number itself and multiply it by their own font size. When you use em, px or %, children inherit the computed length, which was calculated from the parent's font size.

Here's the problem in action:

<article class="post">
  <p>Body text at the article's size.</p>
  <h2>A large heading that wraps onto a second line on smaller screens</h2>
</article>

.post {
  font-size: 16px;
  line-height: 1.5em; /* computes to 24px, and 24px is inherited */
}

.post h2 {
  font-size: 40px;    /* line height is still 24px: lines overlap */
}

The heading's lines are now 24px apart while the text is 40px tall, so the lines overlap. With a unitless value, the heading gets 40 × 1.5 = 60px instead, which is too loose but at least doesn't overlap, and you can then override it.

.post {
  font-size: 1rem;
  line-height: 1.5;   /* each element multiplies by its own font size */
}

.post h2 {
  font-size: 2.5rem;
  line-height: 1.2;
}

What line-height: normal Means

The default value, normal, uses metrics stored in the font file. The result varies by typeface, typically somewhere around 1.1 to 1.3, and can differ between operating systems for the same font. It's usually too tight for body text and makes layouts inconsistent when fonts fall back. Set an explicit value on body and don't rely on normal.

Choosing Line Height for Body Text

There's no single correct value, but some factors push it up or down.

Factors That Need More Line Height

• Long line lengths: The longer the line, the further the eye travels back to find the start of the next one. More space helps it land on the right line.
• Large x-height: Typefaces with tall lowercase letters, such as Verdana or Inter, fill more of the line and look tighter at the same value.
• Heavy or dark text: Bold weights and dense typefaces need room to breathe.
• Light text on dark backgrounds: Text on dark backgrounds can appear to spread, and slightly more space can help.
• Sans-serif body text: Without serifs to guide the eye horizontally, many sans-serifs benefit from a touch more leading.

Factors That Need Less Line Height

• Short line lengths: In narrow columns, such as on phones, a little less space keeps paragraphs compact.
• Small x-height: Typefaces like Garamond, with short lowercase letters, have more built-in space between lines.
• Large text: As size increases, the same ratio produces bigger gaps.

A sensible starting point for an article page:

body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.6;
}

@media (max-width: 40rem) {
  body {
    font-size: 1.0625rem;
    line-height: 1.55;
  }
}

Accessibility and the 1.5 Guideline

WCAG 2.2 Success Criterion 1.4.12, Text Spacing, requires that content still works if users set line height to at least 1.5 times the font size. It doesn't require 1.5 as your default, but it means your layout must not clip or overlap when someone applies it. Criterion 1.4.8 at Level AAA recommends line spacing of at least 1.5 within paragraphs. Using around 1.5 for body text keeps you comfortably aligned with both. For the wider context of line length, see the ideal line length for readable text.

Line Height for Headings

Large type needs proportionally less leading. A heading at 48px with a line height of 1.5 has 72px between baselines, which makes a two-line heading look like two separate headings.

A common pattern is to reduce line height as size increases:

h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.2;
}

h3 {
  font-size: 1.375rem;
  line-height: 1.3;
}

Using calc() for Line Height That Shrinks With Size

You can let line height adjust automatically by combining a fixed amount with a multiplier. This keeps small text comfortable and tightens large text:

:root {
  --leading-tight: calc(2px + 1.1em);
}

h1,
h2,
h3 {
  line-height: var(--leading-tight);
}

At 20px, that gives 24px (a ratio of 1.2). At 50px, it gives 57px (a ratio of about 1.14). Because this value is a length, it should be set directly on each element that needs it rather than inherited from a parent, for the reasons described above.

Watch Descenders and Accents

Very tight heading line heights, below about 1.0, can make descenders on one line collide with ascenders or accented capitals on the next. If your content includes languages with diacritics, such as Vietnamese or Polish, test with real words before going very tight.

Line Height in Interfaces

Buttons, form fields, navigation and labels often contain a single line, but their line height still matters:

button,
input,
select {
  font: inherit;
  line-height: 1.25;
  padding: 0.625rem 1rem;
}

.badge {
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
}

Setting height with padding rather than a fixed height lets the element grow if text wraps or the user increases text spacing, which is exactly what WCAG 1.4.12 tests for.

Controlling Space Above and Below Text

Because of half-leading, text never sits flush with the top or bottom of its box. That's fine for paragraphs, but it can make it hard to align a heading's capitals precisely with the top of an image, or to centre text optically in a button.

The lh and rlh Units

CSS has units based on line height. 1lh equals the computed line height of the current element, and 1rlh equals the line height of the root element. They're useful for spacing that follows your text rhythm:

p {
  margin-block: 0 1lh;
}

.callout {
  padding: 1rlh;
}

Both units are supported in current versions of Chrome, Edge, Firefox and Safari.

Trimming With text-box

The text-box property trims the extra space above and below text to the font's metrics, such as the cap height and the alphabetic baseline:

h1 {
  line-height: 1.1;
  text-box: trim-both cap alphabetic;
}

With this rule, the top of the heading's box aligns with the top of the capital letters and the bottom aligns with the baseline. text-box is supported in recent versions of Chromium-based browsers and Safari. Check current support before relying on it, and treat it as a progressive enhancement, since browsers that don't support it simply keep the normal spacing.

How to Test Your Line Height

1. Read a long paragraph at real size: If you lose your place when moving to the next line, add space. If the paragraph looks striped, reduce it.
2. Test the narrowest and widest layouts: Line length changes with screen width, and line height should feel right at both ends.
3. Check headings that wrap: Make the window narrow enough for headings to wrap onto two or three lines and see if they still read as one heading.
4. Apply WCAG text spacing: Override line height to 1.5 and paragraph spacing to 2em and confirm nothing overlaps or gets cut off.
5. Check fallback fonts: Disable your web font in DevTools and make sure the fallback still looks reasonable with the same line height.

---

FAQ: Leading and Line Height

---

Conclusion

Leading is the space between lines of text, a term inherited from the lead strips of metal typesetting, and in CSS it's controlled with line-height. The browser splits the extra space above and below each line, and unitless values let every element calculate its own line height from its own font size, which avoids the overlapping lines that inherited lengths can cause.

For body text, start at about 1.5 and adjust for line length, x-height and weight. Tighten headings to around 1.1 to 1.3, use padding instead of fixed heights for interface elements, and test with WCAG text spacing applied. Where you need precise alignment, the lh units and text-box give you finer control. Get line height right and the rest of your typography becomes noticeably easier to read.