line-height

Line-height controls the vertical space between lines of text. Higher line-height improves readability; lower values create compact layouts. Use unitless values (relative to font-size) or length units.

Line Height Values

CSS

/* Unitless (relative to font-size) */
.element {
  line-height: 1.5;
  /* 1.5x font-size */
}

/* Length values */
.element {
  line-height: 24px;
  line-height: 1.5em;
  line-height: 1.5rem;
}

/* Percentage */
.element {
  line-height: 150%;
}

/* Named values */
.element {
  line-height: normal;   /* Typically 1.2 */
}

/* Inherit */
.element {
  line-height: inherit;
}

Readability Guidelines

Context	Recommended	Reason
Body text	1.5-1.8	Comfortable reading
Headings	1.2-1.4	Tight spacing
Navigation	1.1-1.2	Compact
Code/mono	1.5-1.7	Clear distinction

CSS

/* Readable body text */
body {
  font-size: 16px;
  line-height: 1.6;
  /* 25.6px line-height */
}

/* Tight headings */
h1 {
  font-size: 2rem;
  line-height: 1.2;
}

/* Spacious article */
article {
  line-height: 1.8;
}

/* Code block */
pre {
  line-height: 1.5;
}

Note

Line-height improves readability. Use 1.5-1.8 for body text, 1.2-1.4 for headings. Use unitless values for inheritance.

Text alignment: [text-align](/css/text-align).