What You’ll Learn

The line-height property controls vertical spacing between lines of text. It is one of the most important CSS properties for readable body copy and balanced typography.

Introduction

The line-height property in CSS is used to control the amount of space between lines of text within an element. It plays a crucial role in enhancing the readability and visual appeal of text by managing vertical spacing.

This property can be used with various units and values to achieve different spacing effects. You will use it on paragraphs, articles, headings, buttons, and any block of text where comfortable reading matters.

Definition and Usage

Apply line-height to text containers such as p, article, li, or body. For body copy, unitless values between 1.5 and 1.7 are a common starting point.

📝 Syntax

The syntax for the line-height property is as follows:

selector {
  line-height: value;
}

Basic Example

p {
  line-height: 1.6;
}

Syntax Rules

• The value can be a number, a length, a percentage, or the keyword normal.
• Unitless numbers multiply by the element’s computed font size.
• Length values such as px or rem set a fixed line box height.
• Percentages are relative to the element’s font size.
• The property is inherited by child elements.

💎 Property Values

🎯 Default Value

The default value of the line-height property is normal, which is determined by the browser and typically around 1.2 times the font size. This value may vary based on the font and the browser’s default settings.

You only need to set line-height when you want tighter headings, more breathable body copy, or consistent vertical rhythm across your design system.

Examples Gallery

Set readable body text, compare tight and loose spacing, use unitless values on headings, and store line height in a CSS variable.

<style>
  p {
    line-height: 1.6;
  }
</style>

<h1>Paragraph with Custom Line Height</h1>
<p>
  This is an example of a paragraph with a line height of 1.6 times the font size.
</p>

.tight { line-height: 1.2; }
.comfortable { line-height: 1.6; }
.loose { line-height: 2; }

h1 {
  font-size: 2rem;
  line-height: 1.2;
}

p {
  line-height: 1.65;
}

:root {
  --body-leading: 1.6;
}

body {
  line-height: var(--body-leading);
}

♿ Accessibility

• Aim for readable body text — Very tight line height makes paragraphs harder to track, especially for low-vision readers.
• Test with zoom — Line height should still feel comfortable when users enlarge text.
• Pair with adequate font size — Small text needs generous line height more than large display text.
• Do not rely on spacing alone — Structure, contrast, and semantic headings matter too.
• Watch multi-line buttons and labels — UI text also benefits from comfortable line height.

💡 Best Practices