CSS Line Height Property: Syntax, Usage, and Examples

The CSS line height property controls the vertical spacing between lines of text. It is an essential part of text formatting, influencing readability, aesthetics, and layout stability across all devices and screen sizes. Whether you're designing for mobile, desktop, or print-friendly webpages, understanding how the CSS line height property works can significantly improve the legibility and visual flow of your content.

What Is the CSS Line Height Property?

The CSS line height property determines the amount of vertical space between lines of text in a block-level element, such as a paragraph (<p>) or heading (<h1>, <h2>, etc.). It defines the height of a line box and indirectly affects how tightly or loosely text appears on the page.

Basic Syntax

selector {
  line-height: value;
}

The value can be a number (unitless), a length (e.g., px, em), a percentage, or the keyword normal.

Why Line Height Matters in CSS

Proper use of the CSS line height improves:

• Readability: Adequate spacing between lines prevents crowding and eye strain.
• Design consistency: Uniform spacing ensures predictable alignment and layout behavior.
• Accessibility: Users with visual impairments benefit from increased line spacing.
• Vertical rhythm: Harmonious spacing across typography and layout components.

Understanding the CSS line height property can be especially important for responsive design and scalable interfaces, where font sizes and containers change dynamically.

Accepted Values for Line Height CSS

1. Unitless Number (Recommended)

p {
  line-height: 1.5;
}

This multiplies the element’s font size. If the font size is 16px, the line height will be 24px. Unitless values are recommended because they scale naturally with the font size of the element and its descendants.

2. Length Units (px, em, rem)

p {
  line-height: 24px;
}

Defines an absolute line box height regardless of font size. This can break vertical alignment in some nested contexts.

p {
  line-height: 1.5em;
}

Relative to the current font size. Less flexible than unitless, but usable in some cases.

3. Percentages

p {
  line-height: 150%;
}

150% of the element’s font size. Similar in behavior to a numeric value, but less commonly used.

4. The normal Keyword

p {
  line-height: normal;
}

Browsers use a default line height that typically ranges between 1.0 and 1.2 times the font size. While easy to use, it offers less control and may vary between browsers and fonts.

Inheritance and the Line Height Property

Line height is an inherited property. If a parent element has a set line height, all children without an explicit value will inherit it.

When using unitless values, the inherited value scales correctly with each element’s font size. This is why designers and developers often prefer unitless line height in responsive typography systems.

body {
  line-height: 1.6;
}

This declaration will provide consistent spacing across nested text elements, regardless of their individual font sizes.

Using Line Height in Different Contexts

Paragraphs

p {
  font-size: 16px;
  line-height: 1.5;
}

This provides a good balance between text density and white space.

Headings

h1 {
  font-size: 36px;
  line-height: 1.2;
}

Tighter line height for headers can make them more visually compact and emphasize their hierarchy.

Inline Elements

Although line height is generally associated with block-level elements, it also affects inline elements, particularly in vertical alignment and spacing.

span {
  line-height: 1.4;
}

This will influence how the line box around the span is rendered, which may impact layout behavior in flexible containers.

CSS Line Height and Vertical Alignment

The line height of inline elements plays a role in aligning text vertically relative to its container.

For example:

.text-center {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

This technique vertically centers single-line text using equal height and line height.

However, it breaks for multi-line content and should be replaced with flexbox or grid in those cases.

Common Line Height Mistakes

1. Using Fixed Units with Relative Fonts

p {
  font-size: 1rem;
  line-height: 24px;
}

This locks the spacing and may cause inconsistency if font sizes change. A unitless or relative line height is more flexible.

2. Forgetting Inheritance Behavior

.parent {
  line-height: 2;
}
.child {
  font-size: 0.8rem;
}

Without a reset, the child will inherit the parent’s line height, resulting in inconsistent spacing. Use unitless values or explicitly define the child’s line height when needed.

Line Height and Accessibility

The WCAG 2.1 guidelines recommend a minimum line height of 1.5 times the font size for body text. This improves readability, especially for users with visual processing disorders, dyslexia, or attention deficits.

Tips:

• Avoid line heights below 1.2 for text blocks.
• Consider 1.6–1.8 for paragraphs with dense content or low-contrast color schemes.
• Ensure consistent spacing across breakpoints.

Responsive Line Height Techniques

When designing for responsive layouts, consider adjusting line height alongside font size using CSS techniques like:

Media Queries

p {
  font-size: 1rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  p {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

CSS Clamp and Fluid Typography

p {
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.6;
}

This ensures both font size and spacing adjust smoothly with the viewport width.

Interplay Between Line Height and Leading

The vertical space between lines (commonly called leading) is determined by the difference between the line height and the font size. This extra space is divided equally above and below the text line.

For example:

p {
  font-size: 16px;
  line-height: 24px;
}

Here, 8px of leading is applied: 4px above and 4px below.

Understanding this helps when aligning text across columns, buttons, and containers.

Real-World Examples and Use Cases

Clean Blog Paragraphs

body {
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.75;
}

Ideal for long-form reading experiences.

Tight Headings

h2 {
  font-size: 28px;
  line-height: 1.2;
}

Creates visual hierarchy with efficient space use.

Navigation Menus

nav a {
  font-size: 16px;
  line-height: 1.4;
}

Keeps links tightly grouped but still readable.

Table Cells

td {
  line-height: 1.3;
}

Improves legibility without creating too much vertical spacing.

CSS Line Height vs Padding and Margin

While padding and margin control space around elements, line height affects the internal spacing between lines of text. Do not confuse the two when trying to adjust content spacing.

p {
  margin-bottom: 1rem; /* Outside spacing */
  line-height: 1.6;     /* Inside line spacing */
}

This distinction is crucial for maintaining predictable layouts and preventing visual overlap or crowding.

The CSS line height property is a foundational tool for managing vertical rhythm and improving text readability. By adjusting line height CSS values thoughtfully, you create a more pleasant and accessible experience for users across devices.

Understanding what is line height property in CSS involves more than memorizing syntax—it requires knowing how it interacts with font size, inheritance, layout, and accessibility guidelines. Use unitless values for flexibility, test your typography on real content, and remember that small adjustments to line height can make a big difference in visual clarity.