Line-Height: The Complete CSS Guide for Web Typography

What is Line-Height?

The line-height CSS property defines the space between two inline elements on the same line. It controls the vertical distance between lines of text, essentially determining how "tight" or "relaxed" your typography appears. Unlike margin or padding, line-height affects the entire line box, making it fundamental to how text flows and reads on the web.

Understanding Line Box Anatomy

To truly understand line-height, you need to understand how browsers calculate line boxes. Each line of text sits within a "line box" that extends from the top of the highest element on the line to the bottom of the lowest element. The line-height property directly influences the height of this line box, with the text content vertically centered within it by default.

When you set a line-height value, you're essentially defining the minimum height for each line of text. If the content on a line is smaller than the specified line-height, the extra space distributes equally above and below the text. This behavior explains why setting an identical line-height on text with different font sizes produces consistent vertical spacing across different elements.

The line-height property works with all inline-level elements, including text, images, form inputs, and inline-block elements. This makes it versatile for controlling spacing in complex layouts where multiple element types appear on the same line.

The Browser Default Behavior

Browsers apply a default line-height of approximately 1.2 to 1.5 depending on the font and user agent stylesheet. This default varies because it's based on the font's intrinsic metrics and the browser's rendering engine. For most body text, this default often proves too tight for optimal readability, especially at smaller sizes where increased line-height can significantly improve comprehension.

The default behavior means that if you don't explicitly set line-height, your typography inherits values from parent elements or the browser defaults. This inheritance chain can lead to unexpected spacing differences, which is why many professional web development services establish explicit line-height values as part of their base typography styles.

Line-Height Syntax and Values

The line-height property accepts several types of values, each with distinct behavior and use cases. Understanding these differences is essential for making informed typography decisions.

Unitless Values: The Recommended Approach

Unitless values (numbers without units like px, em, or rem) represent a multiplier of the element's font-size. For example, line-height: 1.5 means the line height will be 1.5 times the font size of the current element. This approach is universally recommended for body text and most typography applications because it creates predictable, scalable spacing that works well with responsive design.

The power of unitless values lies in their inheritance behavior. When a child element inherits a unitless line-height, it inherits the computed value rather than the formula. This means if a parent has line-height: 1.5 with 16px font size, the child inherits 24px (the computed value), not 1.5. This behavior can cause unexpected results when font sizes change dramatically between parent and child elements.

For this reason, many developers prefer to keep line-height as unitless values throughout their stylesheets. This approach ensures that line-height scales proportionally with font size changes, making responsive typography easier to maintain and consistent across different screen sizes and device contexts.

Fixed Unit Values

Fixed units like pixels (px), ems (rem), and percentages (%) provide absolute control over line-height values. When you use line-height: 24px, you're explicitly setting the line box height to 24 pixels regardless of the font size. This approach has its place for specific design requirements but comes with important caveats.

Ems and rems create line-height values that scale with the current element's font size. For instance, line-height: 2em creates a line height twice the current font size. However, because ems compound when nested within elements that also use em-based line-height, this can lead to exponentially increasing line heights in complex component trees.

Percentages behave similarly to ems, with line-height: 150% equivalent to 1.5 as a unitless value. The key difference is that percentages always calculate relative to the element's own font size, avoiding the compounding issues that can occur with nested em values in certain edge cases.

Pixels provide the most absolute control but are generally discouraged for body text because they don't scale with user font size preferences and can cause accessibility issues for users who need larger text. However, pixels can be appropriate for headings and decorative text where precise visual control is paramount and accessibility concerns are addressed through other means.

The Normal Keyword

The normal keyword allows the browser to determine line-height based on the font's intrinsic properties. This typically results in values around 1.2 for most fonts, though it varies by font family and browser. The normal value is the browser default and is useful when you want to defer to the font designer's intended spacing.

Using normal can be appropriate when working with fonts that have well-designed metrics, but it introduces inconsistency across browsers and fonts. For production websites requiring consistent typography, explicitly setting line-height values provides more reliable results.

Negative Values and Special Cases

The CSS specification doesn't allow negative values for line-height, and attempting to use them will result in no change or invalid property declaration. This makes sense from a typographic perspective--negative line height would cause text lines to overlap, rendering content unreadable.

There's one exception: the line-height property can be set to 0 on replaced elements like images to prevent them from contributing extra line box height. This technique is sometimes used when integrating images inline with text where you want the image to not affect text line spacing.

Optimal Line-Height Values by Content Type

Different types of content benefit from different line-height values. Understanding these patterns helps you make informed decisions for your typography system.

Body Text: 1.5 to 1.7

For paragraph text and general body content, a line-height between 1.5 and 1.7 provides optimal readability for most fonts and content lengths. This range allows readers to track from the end of one line to the beginning of the next without losing their place, while maintaining efficient use of screen real estate.

WCAG 2.1 Success Criterion 1.4.12 requires that content supports line height of at least 1.5 times the font size without loss of content or functionality. This accessibility requirement aligns with research showing that increased line spacing improves reading comprehension for many users, including those with dyslexia and visual impairments.

Shorter lines can often use slightly tighter line heights (around 1.5), while longer lines benefit from more generous spacing (1.6 to 1.7). The key is testing with your actual content to find the optimal balance for your specific use case.

Headings: 1.2 to 1.35

Headings typically use tighter line heights than body text because they contain less text per line and serve a structural rather than narrative purpose. A line-height between 1.2 and 1.35 keeps headings compact and authoritative while maintaining readability.

Larger headings benefit from tighter line heights because the font size already provides significant visual weight. Adding generous line height can make headings feel disconnected or overly tall, undermining their hierarchical function. The goal is to keep the heading as a cohesive visual unit that clearly signals the start of a new section.

When headings wrap across multiple lines, you'll want to test that the line height feels comfortable with wrapped text. Some designs require slightly larger line heights (up to 1.4) when headings frequently wrap, while single-line headings can use tighter values.

UI Components: 1.3 to 1.5

User interface elements like buttons, form inputs, navigation items, and cards often use line-height between 1.3 and 1.5. This tighter spacing keeps UI components compact while maintaining readability for short text strings.

Buttons typically perform well with line-height around 1.4 to 1.5, providing enough space for touch targets while keeping text legible. Navigation items often use 1.4 to 1.5 for similar reasons. Form labels and placeholder text may benefit from 1.3 to 1.4 spacing since users typically scan rather than read this content extensively.

The key consideration for UI text is context and interaction. Users don't read UI text the same way they read articles--they scan and recognize. Tighter line heights improve scannability while still maintaining basic readability.

Code and Monospace Text: 1.5 to 1.6

Code examples and monospace text benefit from slightly more generous line height than UI text but less than body text. Values between 1.5 and 1.6 work well because code often includes vertical alignment of characters that tight line heights can disrupt.

Monospace fonts have different metrics than proportional fonts, and their square character shapes can appear more cramped with tight line heights. Increasing line height slightly improves readability for code blocks, terminal output, and technical documentation that includes inline code snippets.

For code blocks, also consider setting a base font size that ensures code remains readable on all devices. Many design systems specify a minimum font size for code that works with the chosen line height to maintain the vertical rhythm.

Accessibility and Line-Height

Line-height plays a crucial role in web accessibility, directly impacting how users with visual impairments and cognitive disabilities interact with your content.

WCAG 1.4.12 Text Spacing Requirements

Web Content Accessibility Guidelines (WCAG) 2.1 Success Criterion 1.4.12 requires that content supports text spacing adjustments without loss of content or functionality. Specifically, the criterion requires supporting line height (line spacing) of at least 1.5 times the font size. This requirement exists because many users need increased spacing between lines to read effectively.

The criterion doesn't require you to use 1.5 as your default line-height--it requires that your content doesn't break when users or assistive technologies override line spacing to this minimum value. This distinction is important: you can design with your preferred line-height as long as your layout can accommodate user overrides.

Testing for WCAG 1.4.12 compliance involves verifying that your content remains usable when line-height is increased to 1.5, paragraph spacing to 2 times font size, letter spacing to 0.12 times font size, and word spacing to 0.16 times font size. If text gets cut off, overlaps other content, or becomes inoperable, your content fails the criterion.

Supporting Dyslexia and Cognitive Disabilities

Research shows that increased line spacing improves reading speed and comprehension for users with dyslexia and other cognitive disabilities. The extra space between lines helps readers track their position and reduces the cognitive load of moving from line to line.

Users with dyslexia often benefit from line heights at the higher end of the recommended range (1.6 to 1.7) for body text. This recommendation aligns with accessibility overlays and browser extensions that many dyslexic users employ to customize their reading experience.

Beyond line-height, consider how your typography system supports other text spacing adjustments. Users who need increased letter spacing or word spacing also need adequate line height to prevent text from overlapping when multiple spacing adjustments are combined.

Responsive Typography and Accessibility

Responsive design introduces additional accessibility considerations for line-height. When text wraps at different viewport sizes, line-height affects how gracefully the text flows and whether users can maintain their reading position across viewport changes.

Test your typography at multiple viewport sizes, paying particular attention to how line wrapping affects reading flow. Users who magnify content using browser zoom or assistive technologies may see different line wrapping than your design expects, and adequate line-height helps maintain readability across these variations. Implementing accessible web development practices ensures your typography works for all users.

Consider using relative units for font sizes that scale with the viewport, ensuring that line-height proportions remain consistent across different zoom levels and screen sizes. This approach respects user preferences while maintaining the vertical rhythm of your typography system.

Vertical Rhythm and Typography Systems

Creating a consistent vertical rhythm involves establishing a base unit and building all typography and spacing as multiples of that unit. Line-height is central to this rhythm.

Establishing a Baseline Grid

A baseline grid aligns all vertical spacing to a consistent rhythm, typically based on a base font size and line-height combination. For example, if your base font size is 16px and you use line-height: 1.5, your baseline grid has 4px increments (16px × 1.5 = 24px line box, which is 6 × 4px).

This grid then guides spacing for all elements: paragraph margins, heading spacing, component padding, and whitespace between sections all align to the baseline. The result is typography that feels cohesive and professional, with a visual rhythm that guides the eye down the page.

Many CSS frameworks and design systems establish explicit baseline grids. Tailwind CSS, for instance, uses a 4px scale for spacing utilities, which aligns well with common typography systems using 16px base font and 1.5 line-height.

Line-Height and Margin Collapsing

Understanding how line-height interacts with margin collapsing helps you predict and control vertical spacing in your layouts. The line-height of an element affects the minimum height of its line boxes, but margins on block-level elements still collapse according to standard CSS margin collapsing rules.

When paragraphs have top and bottom margins, those margins collapse with each other and with container margins. Line-height doesn't prevent this collapsing--it simply establishes the minimum height of each line box. The practical implication is that you can't use line-height alone to create consistent spacing; you need to consider margin and padding alongside line-height.

For consistent vertical rhythm, many developers prefer using padding rather than margins for spacing within components, or use CSS Grid/Flexbox layouts that don't rely on margin collapsing behavior. These approaches give more predictable control over vertical spacing. Professional web development services often implement systematic typography scales for consistency.

Modular Scale Typography

A modular scale establishes a mathematical relationship between font sizes, creating typography that feels harmonious and intentional. Line-height values can be scaled alongside font sizes to maintain consistent proportions across your typography system.

For example, using a 1.25 major third scale, you might have font sizes of 16px (base), 20px, 25px, 31.25px, 39.06px, and 48.83px. Your line-height values might follow a similar progression: 1.5 for base text, 1.4 for larger sizes, 1.3 for headings, creating a cohesive typographic system.

This approach ensures that no matter what font size you're using, the line-height maintains an appropriate relationship with the text. Larger text gets proportionally tighter line-height, smaller text gets proportionally looser line-height, creating visual harmony across your entire typography system.

Common Line-Height Issues and Solutions

Understanding common line-height pitfalls helps you avoid them in your own work and debug issues in existing codebases.

Text Getting Cut Off

When line-height is set too tightly relative to content that extends beyond expected bounds, text can get cut off. This often happens with foreign characters, mathematical symbols, or inline images that have unusual vertical metrics. The solution is to ensure adequate line-height that accommodates the tallest elements on each line.

Test your typography with actual content, including edge cases like text with extensive ascenders and descenders, multilingual content with different character heights, and inline SVGs or icons. These elements often reveal line-height issues that wouldn't appear with standard English text.

If you can't increase line-height globally, consider using a minimum line-height with line-height: normal or a specific unit value that ensures adequate space for your tallest content. Some teams use line-height: 1.5 as a minimum, increasing it for components that need more space.

Inherited Line-Height Problems

Unitless line-height values inherit as computed values while unit values inherit as declared values. This distinction causes issues when font sizes change significantly between parent and child elements.

For example, if a parent has line-height: 1.5 with 16px font (computed to 24px), and a child has 48px font, the child inherits 24px line-height rather than 1.5. This results in a line-height of just 0.5 on the child--extremely tight and likely problematic.

Solutions include using unitless line-height values throughout your stylesheet, explicitly setting line-height on child elements, or using CSS custom properties that recalculate based on current font size. The cleanest long-term solution is usually explicit line-height declarations where font sizes vary significantly.

Line-Height and Inline-Block Alignment

When line-height is applied to inline-block elements, it can create unexpected spacing because inline-block elements generate line boxes just like text. This is particularly noticeable in button components or navigation items where you want tight spacing but line-height creates extra vertical space.

For inline-block elements that should have tight spacing, set line-height: 1 or use height and vertical-align properties instead of controlling height through line-height. Alternatively, use Flexbox or Grid layouts which handle vertical alignment differently than inline formatting contexts.

Line-Height with Images

Images inline with text inherit the line-height of their parent text, which can create unwanted gaps above and below the image. The image sits within the line box defined by line-height, but browsers render the image at its natural height regardless of the line box.

To fix this, you can set line-height: 0 on the image's container, adjust vertical alignment with vertical-align: middle or other values, or wrap the image in a span with adjusted line-height. Each approach has different side effects, so test with your specific layout requirements.

For image-heavy content like articles, consider using figure elements with display: block to take images out of the inline formatting context entirely. This gives you precise control over image spacing independent of text line-height.

Performance Considerations

While line-height itself has minimal direct performance impact, how you use it affects rendering performance in complex layouts.

Repaint and Reflow Costs

Changing line-height on an element with many child elements can trigger layout recalculation (reflow) because the height of each line box needs to be recomputed. In performance-critical scenarios, avoid animating or frequently changing line-height on large blocks of text.

For animations or interactive states, consider using transforms or opacity instead of line-height, as these only trigger compositing rather than full layout recalculation. If you must animate line-height, apply it to individual elements rather than containers with many children.

CSS Custom Properties and Line-Height

CSS custom properties (CSS variables) provide an efficient way to manage line-height across a design system. Define line-height values as custom properties at the root level, then reference them throughout your stylesheet. This makes global changes easier and ensures consistency.

:root {
 --line-height-tight: 1.25;
 --line-height-base: 1.5;
 --line-height-loose: 1.75;
}

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

h1 {
 line-height: var(--line-height-tight);
}

This approach also makes it easy to create responsive variants using media queries, changing line-height breakpoints for different screen sizes. For example, you might use tighter line-height on mobile where vertical space is more constrained.

Line-Height in Large-Scale CSS

At scale, inconsistent line-height usage makes CSS harder to maintain and can impact bundle size. Establishing clear conventions and using a limited set of approved values helps maintain consistency.

Many teams document their typography system with specific line-height values for each element type. This documentation serves as a reference for developers and helps ensure new code follows established patterns. Consider adding linter rules to enforce your typography conventions for performant web applications.

Responsive Line-Height Strategies

Responsive typography requires thoughtful approaches to line-height that work across different viewport sizes and user preferences.

Viewport-Based Adjustments

While line-height should generally scale proportionally with font size, there are cases where adjusting line-height at specific breakpoints improves readability. On very small screens, slightly increased line-height can help prevent line tracking issues when text wraps frequently.

Use CSS media queries to adjust line-height alongside font size changes. A common pattern is to use slightly tighter line-height at larger sizes and more generous spacing at smaller sizes. This counteracts the tendency for smaller text to feel cramped when it wraps frequently.

p {
 line-height: 1.6;
}

@media (max-width: 640px) {
 p {
 line-height: 1.7;
 }
}

Fluid Typography and Line-Height

Fluid typography scales smoothly between minimum and maximum values using viewport units or CSS container queries. Line-height should scale proportionally with font size to maintain consistent proportions across the fluid range. Implementing responsive web design ensures your typography adapts gracefully across devices.

When implementing fluid typography, consider how line-height changes at extreme viewport sizes. The goal is to ensure text remains readable whether it's shown on a small mobile phone or a large desktop monitor. You may need to clamp line-height values to prevent them from becoming too tight or too loose at viewport extremes.

Print Styles and Line-Height

Print stylesheets often require different line-height values than screen styles. Paper has different characteristics than screens, and users may have different reading contexts. Consider adding print-specific typography rules that adjust line-height for optimal reading on paper.

For print, you might use slightly tighter line-height since readers can control the viewing distance more precisely than with screens. You might also consider whether the page dimensions and typical print settings affect your line-height decisions.

Line-Height with Other CSS Properties

Line-height interacts with several other CSS properties in ways that affect layout and typography.

The vertical-align property controls the vertical positioning of inline elements within their line box. Line-height affects the line box height, while vertical-align positions the element within that space. Understanding this relationship helps you control inline element alignment precisely.

For example, vertical-align: middle positions an element at the vertical center of the line box, which is influenced by line-height. If you change line-height, the vertical center point moves, potentially requiring vertical-align adjustments.

The font-variant property affects how text renders, particularly for features like small caps. These variants can change the apparent height of text, potentially requiring line-height adjustments to prevent clipping or excessive spacing. When using font-variant-caps: small-caps, the smaller caps may leave too much space above and below with typical line-height values.

Sources

1. HubSpot: Your Guide to the CSS Line Height Property - Comprehensive guide covering line-height syntax, values, and accessibility considerations
2. W3C WAI: Understanding Success Criterion 1.4.12 - Text Spacing - Official WCAG guidelines for text spacing requirements
3. MDN Web Docs: line-height - Official documentation on CSS line-height syntax and values
4. CSS-Tricks: Line-Height - Visual examples and best practices for line-height implementation
5. WebAIM: Text Spacing - Accessibility implementation guidance for text spacing