Runnable CSS Docs: Line Height

Q: Should line-height have a unit?

Usually no. A unitless value like 1.5 is multiplied by each element's own font size, so it stays proportional in children with a different size. A value with a unit is computed once and inherited as a fixed length.

What line-height does

line-height sets the height of each line of text. The difference between that height and the height the font itself needs is split in half and added above and below the letters, so it is how you control the space between lines.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

All three paragraphs use a 16px font. The lines are 16px, 24px and 32px tall.

Values: unitless, length, percentage, normal

Value	Example	Line height for 16px text	Inherited by children as
Number	`1.5`	24px	The number (1.5), recomputed per element
Length	`24px`, `1.5em`, `1.5rem`	24px	The computed length (24px)
Percentage	`150%`	24px	The computed length (24px)
`normal`	`normal`	From the font, often about 1.2	`normal`

The first and second rows look the same on one element. The difference only shows when a child has a different font size, which is the next section.

Why unitless is the right default

A 1.5em or 150% line height is turned into pixels on the parent, and children inherit those pixels. A child with a bigger font then gets lines shorter than its letters. A unitless 1.5 is inherited as the number itself and multiplied by each child's own font size.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

Both headings wrap to two lines. The first inherits 21px lines for 32px letters, so its lines overlap. The second gets 32 × 1.5 = 48px lines. Set line-height once on body as a number and most pages never need it again.

Try values yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Try 1, 2, 30px, 200% and normal. Chrome reports normal as the word itself rather than a pixel value, because its size comes from the font.

Good values for readable text

Body text: 1.4 to 1.6. Longer lines need more line height so the eye can find the start of the next line.
Headings: 1.1 to 1.3. Large text with 1.5 spacing looks like separate lines rather than one heading.
Buttons and single-line labels: 1 to 1.25, with padding for the height.

For accessibility, WCAG success criterion 1.4.12 requires that a page still works when a reader sets line height to 1.5 times the font size, so avoid fixed heights on text boxes that would clip it.

Centering one line of text vertically

When a box holds exactly one line, a line-height equal to the box height puts the text in its vertical middle, because the extra space is split evenly above and below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

It breaks as soon as the text wraps to two lines, because each line is then 40px tall. For anything that can wrap, center with flexbox instead, as shown on the center a div page.

The font shorthand

The font shorthand sets size and line height together with a slash:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

The shorthand resets every font property it does not mention (including line-height to normal when you leave out the slash part), so write it before any individual font-* rules.

Common mistakes

Using em or % on a container. Children inherit a fixed length. Use a unitless number.
Fixed height on a text box. When the text wraps or the reader enlarges spacing, it overflows. Let the content set the height.
Too tight body text. line-height: 1 makes paragraphs hard to read. Start at 1.5.
Expecting line-height to add space between paragraphs. That is margin on the paragraphs.
Relying on normal. It changes from font to font, so layouts shift when the font changes.

Frequently Asked Questions

What does line-height do in CSS?

It sets the height of each line box of text. The extra space beyond the font's own height is split evenly above and below the letters, so a bigger line-height means more space between lines.

Should line-height have a unit?

Usually no. A unitless value like 1.5 is multiplied by each element's own font size, so it stays proportional in children with a different size. A value with a unit is computed once and inherited as a fixed length.

What is a good line-height for body text?

Between 1.4 and 1.6 for paragraphs, and around 1.1 to 1.3 for large headings. WCAG's AAA guidance asks for at least 1.5 in paragraphs.

What is line-height: normal?

The default. The browser uses a value from the font's own metrics, typically around 1.2 but different for each font, so it is not predictable across fonts.

How do I change line spacing in HTML?

HTML has no line spacing attribute. Use the CSS property, for example <p style="line-height: 2;"> for double spacing.

Related concepts