CSS Line-height

The line-height property in CSS controls the vertical spacing between lines of text. It’s an essential property for improving the readability and aesthetics of text content on a webpage.

Syntax

line-height: value;

Try It Now

The value can be one of the following:

Normal:
- Default value.
- The browser calculates a reasonable line height based on the font size.
```
line-height: normal;
```
  Try It Now
Number:
- A unitless multiplier of the font size.
- Example: 1.5 means 1.5 times the font size.
```
line-height: 1.5;
```
  Try It Now
Length:
- Specifies the exact line height using units like px, em, rem, etc.
- Example: 20px, 1.5em.
```
line-height: 20px;
```
  Try It Now
Percentage:
- Specifies the line height as a percentage of the font size.
- Example: 150% means 150% of the font size.
```
line-height: 150%;
```
  Try It Now

How It Works

The line-height property sets the total height of a line box. It includes the height of the text and the space above and below it. This space is distributed equally above and below the text.

Practical Examples

Default Line Height

<p style="line-height: normal;">This is a paragraph with normal line-height.</p>

Try It Now

Unitless Line Height

<p style="line-height: 1.5;">This is a paragraph with 1.5 times the font size as line-height.</p>

Try It Now

Fixed Line Height

<p style="line-height: 24px;">This is a paragraph with a fixed line-height of 24px.</p>

Try It Now

Percentage Line Height

<p style="line-height: 150%;">This is a paragraph with 150% line-height.</p>

Try It Now

Best Practices

Use Unitless Values:
- Unitless values like 1.5 are preferred because they scale better with the font size.
- Example:
```
p {
  font-size: 16px;
  line-height: 1.5; /* 16px × 1.5 = 24px */
}
```
  Try It Now
Readable Spacing:For body text, a line height between 1.4 and 1.8 is often ideal.
Consistent Design:Use relative units (em, %, or unitless) for responsive designs.

Common Use Cases

Improving Readability:

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

Try It Now

Tightening or Loosening Text Spacing:

h1 {
  font-size: 32px;
  line-height: 1.2; /* Tight spacing */
}

p {
  font-size: 16px;
  line-height: 1.8; /* Loose spacing */
}

Try It Now

Visual Example

Imagine text with different line-height values:

Line Height: Normal

This is a paragraph
with normal spacing.

Try It Now

Line Height: 1.5

This is a paragraph
with slightly more
spacing between lines.

Try It Now

Line Height: 2

This is a paragraph

with much more spacing
between lines.

Try It Now

Experiment

Try adjusting line-height values in this example:

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    p {
      font-size: 16px;
      line-height: 1.5; /* Adjust this value to see changes */
    }
  </style>
</head>
<body>
  <p>This is an example paragraph to test line-height.</p>
</body>
</html>

Try It Now

Play around with line-height values to see how it affects readability!