CSS Line-Height: Complete Guide to Controlling Text Spacing and Readability

The CSS line-height property is one of the most fundamental yet underutilized tools for creating readable, visually appealing typography on the web. It controls the vertical spacing between lines of text, directly impacting readability, visual hierarchy, and overall user experience.

What is CSS Line-Height?

CSS line-height defines the minimum height of line boxes within an element. Unlike margin or padding, line-height creates space both above and below the text content, effectively controlling the vertical rhythm of your typography.

CSS Line-Height Values and Units

The line-height property accepts several types of values, each with distinct behaviors and use cases.

Unitless Numbers (Recommended)

Unitless values represent a multiplier of the element’s font size. This is the preferred method because it scales proportionally and inherits cleanly.

.text {
  font-size: 16px;
  line-height: 1.5; /* 16px × 1.5 = 24px line height */
}

Length Units (px, em, rem)

Absolute or relative length units set a fixed line height regardless of font size changes.

.fixed-height {
  line-height: 24px; /* Fixed 24px line height */
}

.relative-height {
  line-height: 1.5em; /* 1.5 times current font size */
}

Percentage Values

Percentage values calculate based on the element’s font size but inherit as computed values, which can cause issues in nested elements.

.percentage-height {
  line-height: 150%; /* 150% of font size */
}

Keyword Values

CSS provides several keyword values for common line-height scenarios.

.normal-height {
  line-height: normal; /* Browser default (usually 1.2) */
}

.initial-height {
  line-height: initial; /* Reset to initial value */
}

Interactive Line-Height Demonstrator

Line-Height Best Practices

Optimal Reading Experience

Research in typography suggests specific line-height ranges for optimal readability:

• Body Text: 1.4 to 1.6 for most fonts
• Headings: 1.1 to 1.3 for better visual impact
• Small Text: 1.3 to 1.5 to compensate for reduced legibility

Responsive Line-Height

Line-height should adapt to different screen sizes and font sizes for optimal readability across devices.

/* Base line-height */
.responsive-text {
  line-height: 1.6;
}

/* Tighter line-height for larger screens */
@media (min-width: 768px) {
  .responsive-text {
    line-height: 1.5;
  }
}

/* Adjust for very large text */
@media (min-width: 1200px) {
  .responsive-text {
    font-size: 18px;
    line-height: 1.4;
  }
}

Advanced Line-Height Techniques

Vertical Rhythm with Line-Height

Creating consistent vertical spacing throughout your design using a baseline grid approach.

/* Establish base rhythm */
:root {
  --base-line-height: 1.5;
  --base-font-size: 16px;
  --rhythm-unit: calc(var(--base-font-size) * var(--base-line-height)); /* 24px */
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: var(--rhythm-unit);
}

p {
  line-height: var(--base-line-height);
  margin-bottom: var(--rhythm-unit);
}

Line-Height for Different Font Families

Different fonts require different line-height adjustments due to their unique characteristics.

Common Line-Height Mistakes to Avoid

/* ❌ Problematic */
.text {
  font-size: 16px;
  line-height: 20px; /* Doesn't scale with font-size changes */
}

/* ✅ Better */
.text {
  font-size: 16px;
  line-height: 1.25; /* Scales proportionally */
}

Line-Height and Accessibility

Proper line-height is crucial for web accessibility, particularly for users with dyslexia or visual impairments.

WCAG Guidelines

The Web Content Accessibility Guidelines recommend:

• Minimum line-height: 1.5 times the font size for body text
• Paragraph spacing: At least 2 times the font size
• User control: Allow users to adjust line spacing up to 2 times the default

/* WCAG compliant line-height */
.accessible-text {
  line-height: 1.5; /* Minimum recommended */
  font-size: 16px;
}

/* Allow user customization */
.user-customizable {
  line-height: var(--user-line-height, 1.5);
}

Performance Considerations

Line-height changes can trigger layout recalculations. Use CSS custom properties for dynamic adjustments:

/* Efficient dynamic line-height */
:root {
  --dynamic-line-height: 1.5;
}

.content {
  line-height: var(--dynamic-line-height);
  transition: line-height 0.3s ease;
}

/* JavaScript adjustment */
document.documentElement.style.setProperty('--dynamic-line-height', '1.6');

Browser Compatibility and Fallbacks

Line-height enjoys excellent browser support, but consider fallbacks for advanced features:

/* Progressive enhancement */
.modern-text {
  line-height: 1.5; /* Fallback */
  line-height: clamp(1.4, 2.5vw, 1.6); /* Modern responsive approach */
}

/* CSS custom properties with fallback */
.custom-spacing {
  line-height: 1.5; /* Fallback for older browsers */
  line-height: var(--custom-line-height, 1.5);
}

Real-World Implementation Examples

Blog Post Typography

.blog-post {
  /* Article title */
  h1 {
    line-height: 1.1;
    margin-bottom: 0.5em;
  }
  
  /* Section headings */
  h2, h3 {
    line-height: 1.2;
    margin: 1.5em 0 0.5em;
  }
  
  /* Body paragraphs */
  p {
    line-height: 1.6;
    margin-bottom: 1em;
  }
  
  /* Code blocks */
  pre, code {
    line-height: 1.4;
    font-family: 'Monaco', monospace;
  }
}

Card-Based Layout

.card {
  /* Card title */
  &__title {
    line-height: 1.2;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }
  
  /* Card description */
  &__description {
    line-height: 1.5;
    font-size: 0.9rem;
    color: #666;
  }
  
  /* Compact card variant */
  &--compact {
    .card__title {
      line-height: 1.1;
    }
    .card__description {
      line-height: 1.4;
    }
  }
}

Testing and Optimization

Use browser developer tools to fine-tune line-height values:

1. Visual inspection: Use browser DevTools to adjust line-height in real-time
2. Readability testing: Test with actual content and various font sizes
3. Device testing: Verify appearance across different screen sizes and resolutions
4. Accessibility validation: Use tools like axe-core to check WCAG compliance

Future of Line-Height in CSS

Emerging CSS features are expanding line-height capabilities:

• CSS Logical Properties: line-height-step for consistent vertical rhythm
• Container Queries: Dynamic line-height based on container size
• CSS Nesting: More maintainable line-height organization

/* Future CSS capabilities */
.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .responsive-text {
    line-height: 1.4;
  }
}

Mastering CSS line-height is essential for creating professional, readable web typography. By understanding the different value types, following accessibility guidelines, and implementing responsive approaches, you can significantly improve your website’s user experience and visual appeal. Remember to test your line-height choices across different devices and with real content to ensure optimal results.