What Is Leading, and How Do You Set the Right Line Height?

You launch a redesign and the article pages look fine on your laptop, but readers on phones complain that paragraphs feel like "walls of text." You check the CSS: line-height: 1.2 inherited from a reset that was meant for headings. On another project, a card component uses line-height: 24px, and when a user bumps their browser font size to 24px, the lines crash into each other. Both bugs come from the same property, and both are easy to avoid once you understand how leading works on the web.

This article explains what leading is, where the term came from, how CSS line-height really works (including the half-leading model and the unitless value rule), the values that work for body text, headings, and UI, how to adapt line height to line length and typeface, and how to stay compliant with WCAG 1.4.12.

What Is Leading?

Leading (pronounced "ledding") is the vertical distance between lines of text. In typography it is usually measured from one baseline to the next, a distance also called line spacing or baseline-to-baseline distance.

The term comes from metal typesetting. Compositors inserted thin strips of lead between lines of type to add space. Text set "solid" had no extra strips; text set "10 on 12" meant 10-point type with 12 points from baseline to baseline — 2 points of lead added.

On the web, leading is controlled by the CSS line-height property. A line-height of 1.5 on 16px text gives 24px from line to line.

Print notation	Font size	Baseline-to-baseline	CSS equivalent
10/10 (solid)	10pt	10pt	line-height: 1
10/12	10pt	12pt	line-height: 1.2
16/24	16px	24px	line-height: 1.5
18/30	18px	30px	line-height: 1.667

How CSS line-height Actually Works

CSS does not add leading only below a line, as metal type did. It uses a half-leading model:

1. The browser takes the font's content area, determined by its ascent and descent metrics.
2. It computes the difference between line-height and that content area. This difference is the leading.
3. It splits the leading in half and adds one half above and one half below the text.

The result is a line box of exactly line-height tall, with the text vertically centred inside it according to the font's metrics. Two practical consequences:

• The first line of a paragraph has extra space above it, and the last line has extra space below. This is why text inside a button or card never looks perfectly aligned to the top edge of its box.
• Different fonts sit differently in the same line height, because their ascent and descent metrics differ. Swapping a fallback for a web font can shift text vertically even with an identical line-height.

The text-box property (with text-box-trim and text-box-edge) lets you trim that half-leading at the start and end of a block. It has shipped in Chromium and Safari; check current support before relying on it.

.card-title {
  line-height: 1.3;
  text-box: trim-both cap alphabetic;
}

This trims the space above the cap height and below the alphabetic baseline, making it much easier to align text optically with icons and edges. It is a progressive enhancement: browsers that do not support it simply ignore it.

Unitless, Length, or Percentage?

line-height accepts several value types, and the choice matters because of inheritance.

.unitless {
  line-height: 1.5; /* multiplier: recomputed for each child's font size */
}

.em {
  line-height: 1.5em; /* computed once, then inherited as a fixed length */
}

.percent {
  line-height: 150%; /* same behaviour as em: computed once, inherited as length */
}

.px {
  line-height: 24px; /* fixed regardless of font size */
}

.keyword {
  line-height: normal; /* font-dependent, usually about 1.1 to 1.25 */
}

The key difference: with a unitless value, children inherit the multiplier and compute their own line height. With em, %, or px, children inherit the computed length.

<div class="article" style="font-size: 16px; line-height: 1.5em">
  <h2 style="font-size: 32px">This heading inherits a 24px line height and its lines overlap</h2>
</div>

With line-height: 1.5em on the parent, the 32px heading inherits 24px — less than its own font size — so wrapped lines collide. With line-height: 1.5, the heading would get 48px. Always use unitless values for line-height unless you have a specific reason to lock it.

Fixed px values also break when users change their default font size or zoom text only, which is exactly the scenario WCAG 1.4.4 (Resize Text to 200%) is concerned with.

What Line Height Should You Use?

Body Text

For body copy, 1.5 to 1.7 is the comfortable range on screens. WCAG's advisory guidance has long suggested at least 1.5 for paragraphs, and most readable sites land between 1.5 and 1.65.

Headings

Headings are large and usually short, so the body-text multiplier makes them look disconnected when they wrap. Use 1.05 to 1.3, tightening as size increases.

UI Text

Buttons, labels, form fields, and navigation often use 1.2 to 1.4. Single-line UI elements are more about vertical centring than readability.

Text type	Typical size	Line height
Hero / display headline	48–96px	1.0–1.1
H1–H2	28–48px	1.1–1.25
H3–H4	20–26px	1.25–1.35
Body text (articles, docs)	16–20px	1.5–1.7
Small text, captions	12–14px	1.4–1.6
Buttons, inputs, labels	14–18px	1.2–1.4
Code blocks	13–16px	1.5–1.7

Factors That Change the Ideal Line Height

Line Length

The wider the line, the more line height you need. On long lines, the eye has to travel further back to the start of the next line, and extra leading helps it land on the right one.

• Short measures (35–50 characters, mobile): 1.4–1.5 is often enough.
• Comfortable measures (55–75 characters): 1.5–1.65.
• Long measures (80+ characters): 1.7 or more — but the better fix is shortening the line. The ideal line length guide covers that side of the equation.

X-Height

Typefaces with a large x-height (Inter, Verdana, Source Sans) have more visual mass in each line and need more leading than faces with a small x-height (Garamond, Baskerville). See what x-height is for why.

Font Size

Larger text generally needs a smaller multiplier. A 1.6 multiplier on 18px body text is 28.8px; on 64px headlines it would be 102px of line height, far too loose.

Weight and Colour

Bold or dark, dense text can benefit from slightly more leading. Light text on a dark background also reads better with a little extra space.

Language and Script

Scripts with tall stacked marks, such as Devanagari, Bengali, Thai, or Vietnamese with multiple diacritics, often need more line height to prevent marks from colliding. 1.7 or more is common for Bengali and Hindi body text.

:lang(bn),
:lang(hi) {
  line-height: 1.8;
}

Setting Line Height in CSS

A Size-Aware System

Rather than assigning arbitrary values per component, tie line height to font size with tokens:

:root {
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}

body {
  font-size: 1.125rem;
  line-height: var(--leading-relaxed);
}

h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  line-height: var(--leading-tight);
}

h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  line-height: var(--leading-tight);
}

h3 {
  font-size: 1.375rem;
  line-height: var(--leading-snug);
}

button,
input,
select,
label {
  line-height: var(--leading-snug);
}

Line Height That Shrinks as Size Grows

For fluid headings, you can compute line height from the font size with calc(), adding a fixed amount to a smaller multiplier. As the font gets bigger, the fixed part becomes proportionally smaller:

h1,
h2,
h3 {
  line-height: calc(0.25rem + 1em);
}

At 24px that is 28px (about 1.17); at 60px it is 64px (about 1.07). This automatically tightens large headings without breakpoints. A related newer approach uses the lh and rlh units, which equal the computed line height of the element and the root, handy for spacing elements in multiples of the line.

p + p {
  margin-block-start: 1lh; /* one full line of space between paragraphs */
}

Both lh and rlh are supported in all current major browsers. Spacing in line units is the foundation of a vertical rhythm.

Tailwind CSS v4

In Tailwind v4, leading-* utilities map to --leading-* theme variables, and text size utilities can set a paired line height:

@import "tailwindcss";

@theme {
  --leading-tight: 1.15;
  --leading-relaxed: 1.65;

  --text-lg: 1.125rem;
  --text-lg--line-height: 1.65;

  --text-5xl: 3rem;
  --text-5xl--line-height: 1.1;
}

<h1 class="text-5xl font-bold">Headings get tight leading automatically</h1>
<p class="text-lg">Body text gets relaxed leading from the paired token.</p>
<p class="text-lg/7">Or override inline with the slash modifier.</p>

WordPress theme.json

In a block theme, set default line heights in theme.json version 3:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "typography": {
      "lineHeight": true
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "1.65"
    },
    "elements": {
      "heading": {
        "typography": {
          "lineHeight": "1.15"
        }
      },
      "button": {
        "typography": {
          "lineHeight": "1.3"
        }
      }
    }
  }
}

Accessibility: WCAG 1.4.12 Text Spacing

WCAG 2.2 Success Criterion 1.4.12 (Level AA) requires that no content or functionality is lost when users override:

• Line height to at least 1.5 times the font size
• Paragraph spacing to at least 2 times the font size
• Letter spacing to at least 0.12 times the font size
• Word spacing to at least 0.16 times the font size

You do not have to set line height to 1.5 yourself under this criterion, but your layout must survive users doing so. The usual failures are fixed-height containers:

/* Fails: text overflows and gets clipped when line height increases */
.card-excerpt {
  height: 72px;
  overflow: hidden;
}

/* Passes: the container grows with its content */
.card-excerpt {
  min-height: 4.5em;
}

If you need to truncate text visually, use line-clamp with care and ensure the full content is available elsewhere, such as on the linked page. The guide to the CSS line-clamp property discusses this trade-off.

WCAG 1.4.8 (Visual Presentation, Level AAA) goes further and asks for line spacing of at least 1.5 within paragraphs and paragraph spacing at least 1.5 times larger than line spacing. Meeting AAA here is easy and worth doing for content-heavy sites.

Common Line Height Mistakes

1. Inheriting a tight reset value. Some resets set line-height: 1 or 1.15 on everything. Set body line height explicitly.
2. Using em, %, or px on parents. Children inherit a fixed length and large text overlaps.
3. Using the same line height for headings and body. Headings at 1.6 look like separate lines that happen to be near each other.
4. Fixed container heights that clip text when users increase spacing.
5. Ignoring line length. Very wide lines with tight leading are exhausting; fix the width first, then tune leading.
6. Forgetting non-Latin scripts. Diacritic-heavy and stacked scripts need extra room.

Line Height FAQ

Conclusion

Leading is the space between lines, a term inherited from metal type, and on the web it is controlled by line-height. CSS adds half the leading above and half below each line, which explains the extra space at the top of text boxes and why fonts sit differently in the same line height. Use unitless values so line height scales correctly through inheritance, and avoid fixed pixel values that break when users resize text.

Start body text around 1.5 to 1.7 and headings around 1.05 to 1.3, then adjust for line length, x-height, weight, and script. Build line height into your tokens so every size has a sensible default, and make sure containers grow when users increase spacing under WCAG 1.4.12. Get leading right and your text will feel calm and readable without anyone noticing why.

Here are some useful references for going deeper on leading and line height:

1. MDN Web Docs: line-height — value types, inheritance, and accessibility guidance.
2. W3C: Understanding SC 1.4.12 Text Spacing — the spacing overrides your layout must tolerate.
3. W3C: Understanding SC 1.4.8 Visual Presentation — AAA guidance on line and paragraph spacing.
4. Butterick's Practical Typography: Line spacing — practical ranges for line spacing in body text.
5. Tailwind CSS Docs: line-height — leading-* utilities and paired font-size line heights.