CSS Line Height

line-height sets how tall each line of text is, which controls the space between lines. It has a large effect on how readable a paragraph feels.

1
2
3
4
5
6
7
8
9

<style>
  p { width: 260px; background: #fdf2e9; padding: 8px; display: inline-block; vertical-align: top; margin-right: 6px; font-size: 15px; }
  .tight { line-height: 1; }
  .good  { line-height: 1.6; }
  .loose { line-height: 2.2; }
</style>
<p class="tight"><b>1</b> Lines are packed tightly and ascenders touch descenders, which makes longer text feel cramped and tiring to read.</p>
<p class="good"><b>1.6</b> A comfortable amount of space between lines helps your eyes find the next line without effort.</p>
<p class="loose"><b>2.2</b> Too much space and the paragraph falls apart into separate lines instead of reading as one block.</p>

Use a number without a unit

line-height: 1.6 means “1.6 times this element’s font size”. Because it is a multiplier, it adjusts automatically for every child that has a different font size.

With a length such as line-height: 24px, children inherit 24px even if their text is larger, and lines of big headings can overlap. A plain number avoids that.

Good starting values

Vertically centering a single line

For a single-line button, setting line-height equal to the height used to be a common trick. Today flexbox is the better tool, but you will still see it in older code.