line-height

Sets the height of each line of text, the space between lines.

Initial value: normal
Inherited: Yes
Animatable: yes, as a number or length
Applies to: all elements
JavaScript: element.style.lineHeight = "1.6"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

body {
  line-height: 1.6;
}

h1 {
  line-height: 1.15;
}

Example HTML

<h1 style="line-height: 1.15; margin: 0 0 8px; font-size: 26px;">A heading on two lines looks tight</h1>
<p style="line-height: 1.6; margin: 0;">The paragraph text has a larger line height, so even a long passage reads comfortably on a phone and on a computer.</p>

Preview

Definition and usage

The line-height property sets the height of every line of text. The extra space splits evenly above and below the characters, so a larger value gives more room between lines.

It’s best to give it as a unitless number, for example 1.6. That value gets multiplied by each element’s own font size. Values with a unit (24px, 1.5em) are calculated once and inherited as a fixed number of pixels, which throws off the spacing in elements with a different font size.

For running text, 1.5-1.7 works well, and for large headings, smaller values, for example 1.1-1.2.

Syntax

line-height: normal | <number> | <length> | <percentage>;

Values

normal
The default value, usually around 1.2 depending on the font.
1
Lines packed tightly, one right under the next.
1.6
A comfortable line height for running text.
2.2
Very loose spacing.

Value	Description
normal	The default value, usually around 1.2 depending on the font.
1	Lines packed tightly, one right under the next.
1.6	A comfortable line height for running text.
2.2	Very loose spacing.

Values in practice

normal

The default value, usually around 1.2 depending on the font.

.demo { line-height: normal; }

Lines packed tightly, one right under the next.

.demo { line-height: 1; }

1.6

A comfortable line height for running text.

.demo { line-height: 1.6; }

2.2

Very loose spacing.

.demo { line-height: 2.2; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

Give line-height as a unitless number. You’ll avoid cramped lines in elements with a larger font.
Centering a single line of text in a button with a line-height equal to its height works, but Flexbox or Grid are safer.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course