How To Tame Line Height In CSS

Understanding Line Height Values

The line-height property accepts several different value types, each with distinct behaviors and use cases (MDN Web Docs).

The normal Keyword

The default value, normal, allows the browser to compute an appropriate line height based on the font family and font size. Desktop browsers typically use a default value of approximately 1.2, though this varies depending on the element's font-family (MDN Web Docs).

p {
 line-height: normal;
}

While normal works in many situations, relying on it means accepting browser defaults, which may not align with your design system or accessibility requirements. Different fonts at the same font-size can have dramatically different apparent densities, making normal an unreliable choice for consistent typography across a site.

Unitless Numbers (Recommended Approach)

The recommended method for defining line-height is using a unitless number value. This approach multiplies the value by the element's font size to determine the line height (CSS-Tricks).

body {
 line-height: 1.5;
}

h1 {
 line-height: 1.2;
}

Unitless line heights are preferred because child elements inherit the raw number value rather than the computed pixel value (CSS-Tricks). This means child elements calculate their line height based on their own font size, preventing unexpected spacing issues when font sizes vary throughout your design. This behavior makes unitless values ideal for component-based architectures where text may appear at different sizes in different contexts, a common pattern in modern web development.

Length Values

You can specify line-height using fixed length units like pixels (px), ems, or rems (MDN Web Docs).

p {
 line-height: 24px;
}

h1 {
 line-height: 1.5em;
}

However, using em units can produce unexpected results because em values are relative to the element's font size, which compounds if nested elements have different font sizes (MDN Web Docs). Pixel values, while predictable, don't scale proportionally when users adjust browser font sizes for accessibility.

Percentage Values

Percentage values are relative to the element's font size, similar to em units (MDN Web Docs).

p {
 line-height: 150%;
}

Like em values, percentages can produce unexpected results in nested elements due to inheritance behavior. The computed value is the percentage multiplied by the element's computed font size (MDN Web Docs). This inheritance model can lead to text appearing too spaced out in child elements when percentage values are used on parent containers.

Best Practices for Line Height

Accessibility Requirements

For main paragraph content, WCAG 2.2 guidelines recommend a minimum line-height of 1.5 to assist people experiencing low vision conditions and those with cognitive concerns such as dyslexia (MDN Web Docs). Using a unitless value ensures that line height scales proportionately when users zoom text in their browsers.

/* Accessible baseline */
p {
 line-height: 1.5;
}

The US Web Design System recommends line heights between 1.1 and 1.35 for headings and shorter content, while longer text should have a line height of at least 1.5 (US Web Design System). These guidelines exist because adequate line spacing reduces eye strain and makes it easier for users to track lines of text--particularly important for content-heavy pages like blogs, documentation, and ecommerce solutions. Accessible design practices also contribute to better search engine rankings, as search engines prioritize user-friendly websites.

Matching Line Height to Line Length (The Measure)

Modern typography understanding reveals that optimal line height depends on line length--a concept known as "measure" in traditional typography (D'Amato Design). Longer lines require more line height to help readers track from the end of one line to the start of the next. Shorter lines can use tighter line spacing.

Research from Smashing Magazine's typographic survey found that popular blogs use a ratio of approximately 1.48 for line height to font size, with a line length to line height ratio of about 27.8 (Smashing Magazine). This means if your text is 20 pixels high, the ideal line height would be around 30 pixels, and the line length should be about 556 pixels (20 × 27.8).

Google Fonts knowledge confirms: "There'll depend on the font, the size it's set at, the length of the line, and the overall reading context" (Google Fonts Knowledge). For responsive designs, consider using CSS clamp() to adjust line height based on viewport width.

Type Scale Considerations

Different content types benefit from different line heights. Headings typically look better with tighter line heights (1.1-1.3), while body text requires more breathing room (1.5-1.7) (US Web Design System).

/* Heading styles */
h1 {
 font-size: 2.5rem;
 line-height: 1.2;
}

h2 {
 font-size: 2rem;
 line-height: 1.25;
}

h3 {
 font-size: 1.75rem;
 line-height: 1.3;
}

/* Body text */
p {
 font-size: 1rem;
 line-height: 1.6;
}

This tiered approach creates visual hierarchy and helps readers quickly distinguish between headings and body content. The tighter line height for headings also improves readability when headings are followed by shorter lines of body text. Consistent typography scales are a hallmark of professional web development services.

Common Pitfalls and How to Avoid Them

Unexpected Inheritance

When using pixel or percentage values, child elements inherit the computed value rather than a relative value. This can cause text to appear too spaced out or too cramped in nested elements (CSS-Tricks).

/* Problematic */
.parent {
 line-height: 150%;
 font-size: 16px; /* Computed: 24px */
}

.child {
 font-size: 32px; /* Inherits 24px, not proportional */
}

/* Solution */
.parent {
 line-height: 1.5; /* Child recalculates based on own font-size */
}

This inheritance behavior is particularly problematic when building component libraries or design systems where text may appear at different sizes in different contexts. Always use unitless values to ensure your typography scales predictably.

Vertical Center Alignment Issues

When vertically centering text with line-height, ensure the value matches the container's height exactly, accounting for any padding or borders.

/* Common pattern for single-line vertical centering */
.button {
 height: 48px;
 line-height: 48px; /* Matches height exactly */
 padding: 0 24px;
}

This technique only works for single-line text. For multi-line content, use flexbox or grid instead: display: flex; align-items: center; provides a more robust solution for vertical centering.

Inline Elements and Line Height

Line-height affects inline and inline-block elements differently than block elements. Text inside an inline element contributes to the parent's line box height, which can cause unexpected spacing when mixing inline elements with different font sizes (CSS-Tricks). This is particularly important when using icons alongside text in buttons or navigation elements--setting consistent line-heights or using flexbox alignment can prevent these spacing issues.

Understanding these CSS fundamentals is essential for building maintainable web applications that scale effectively across different content types and components.

Implementing a Line Height System

Design System Approach

Establishing consistent line heights across your project improves maintainability and visual coherence. Consider creating CSS custom properties for your typographic scale.

:root {
 /* Line height scale */
 --line-height-tight: 1.1;
 --line-height-snug: 1.25;
 --line-height-normal: 1.5;
 --line-height-relaxed: 1.75;
 --line-height-loose: 2;

 /* Typography tokens */
 --text-base: {
 font-size: 1rem;
 line-height: var(--line-height-normal);
 }

 --heading-md: {
 font-size: 1.5rem;
 line-height: var(--line-height-tight);
 }
}

This approach centralizes your typography decisions, making it easy to maintain consistency and make global adjustments. When working on full-stack development projects, these tokens can be shared across different parts of your application, ensuring visual consistency whether you're building a marketing site, dashboard, or mobile app.

Quick Reference Table

Related Resources

For more web development guides and tutorials, explore our collection of CSS and frontend development resources covering typography, layout techniques, and performance optimization.

Sources

1. CSS-Tricks Almanac: line-height - Comprehensive property reference covering syntax, values, and browser support
2. MDN Web Docs: line-height - Official documentation with accessibility guidelines and formal specifications
3. D'Amato Design: Relearning line height - Modern typography perspective on line-height and line length relationship
4. Smashing Magazine: Typographic Design Patterns - Industry research on typography ratios
5. US Web Design System: Typography - Government design system guidelines
6. Google Fonts Knowledge: Choosing Line Height - Practical guidance on choosing line height