Line Height and Readability in CSS

What You Learn From This Page

• How line-height contributes to inline layout and line-box dimensions.
• How normal, unitless, length, em, rem, and percentage values behave.
• Why body text, headings, controls, code, and captions need different spacing.
• How font choice, line length, language, zoom, and text-spacing overrides affect readability.
• How to debug line boxes and avoid clipping, overlap, and fragile vertical centering.

Introduction

The CSS line-height property controls the preferred height used when laying out lines of text. It influences the vertical distance between baselines, the height of line boxes, and the amount of breathing room around glyphs. A small change can make a paragraph feel cramped, balanced, or disconnected even when font size and family remain unchanged.

Line height is central to reading comfort, visual rhythm, wrapped headings, code samples, buttons, form controls, and accessibility. It cannot be chosen in isolation. Font metrics, line length, language, weight, letter spacing, container width, and content density all change how the same numeric ratio feels. The strongest strategy begins with unitless values, adjusts them by typographic role, and tests real content under user-controlled spacing.

What Is line-height?

line-height specifies a preferred line height that contributes to calculating line boxes in inline formatting. On a block container, its value affects the root inline box and effectively establishes a minimum for the block's line boxes. Inline children, replaced content, vertical alignment, and font metrics can make actual line-box construction more involved than a simple rectangle around text.

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

In this straightforward example, the preferred line height is 24 pixels. The browser positions glyphs and inline content within line boxes according to the inline layout model.

A Basic Unitless Calculation

A unitless number acts as a multiplier of the element's computed font size. With a 16-pixel font and a line height of 1.5, the preferred line height becomes 24 pixels. If that element's font size changes to 20 pixels, the used line height becomes 30 pixels.

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

The relationship scales automatically and remains easy to understand. This is why unitless values are a strong default for typography systems, particularly when descendants use different font sizes.

Why Line Height Changes Readability

When lines sit too close together, ascenders, descenders, diacritics, and dense letterforms compete visually with neighboring lines. Readers can lose their place while moving from the end of one line to the beginning of the next. Tight spacing becomes especially difficult in long paragraphs and narrow or low-contrast typefaces.

Excessive spacing creates a different problem. Related lines stop appearing as one paragraph, and the eye must travel farther vertically. Good line height creates enough separation to distinguish lines while preserving their grouping. The optimum is contextual rather than one universal number.

Supported Value Types

The property accepts normal, a non-negative number, or a non-negative length or percentage. Common author choices include normal, 1.5, 24px, 1.5em, 1.5rem, and 150%. These can produce the same used value on one element and behave differently through inheritance.

.a { line-height: normal; }
.b { line-height: 1.5; }
.c { line-height: 24px; }
.d { line-height: 1.5em; }
.e { line-height: 150%; }

The value type communicates whether descendants should inherit a ratio or a computed length.

Unitless Line Height

A unitless value such as 1.5 remains a number as its computed value and is inherited as that number. Each descendant multiplies it by its own computed font size. A large heading and small caption can therefore inherit the same ratio while receiving line boxes appropriate to their own sizes.

body {
  line-height: 1.5;
}

h1 {
  font-size: 3rem;
}

The heading computes its line height from 3rem rather than inheriting a length calculated from the body's font size. It can still override the ratio when a tighter heading setting is more appropriate.

Why Unitless Values Usually Inherit Better

Typography often changes size at nested elements. If the parent supplies a ratio, every child recalculates line height from its own size. This preserves the intended proportional relationship through headings, paragraphs, labels, and responsive type changes.

Unitless does not guarantee perfect typography. A ratio of 1.5 may be comfortable for body text and too loose for a large heading. It provides a safe inheritance model, after which role-specific selectors can establish deliberate ratios.

Fixed Length Line Height

A length such as 24px creates a specific preferred line height. This can be appropriate for tightly controlled single-role text, but it becomes fragile when font size, zoom behavior, responsive styles, or inherited descendants change.

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

If the paragraph grows to 24 pixels while the line height remains 24 pixels, lines may feel cramped. If a large child inherits the same computed length, its glyphs can collide or overflow. Use fixed lengths only when the fixed relationship is intentional and tested.

em Line Height

An em value is calculated from the element's font size, so 1.5em on a 16-pixel element produces 24 pixels. However, the computed result is a length. Descendants inherit that length rather than the original multiplier, which can create unexpectedly tight or loose spacing after their font sizes change.

.container {
  font-size: 1rem;
  line-height: 1.5em;
}

.container h2 {
  font-size: 2rem;
}

The heading can inherit the 1.5rem computed length instead of calculating two rem times 1.5. Unitless values avoid this coupling.

Percentage Line Height

A percentage is calculated relative to the element's computed font size. A value of 150 percent on a 16-pixel element produces a computed line height of 24 pixels. Like an em value, the result is a computed length for inheritance rather than a reusable ratio.

Percentage syntax is valid, but a unitless number usually expresses proportional line spacing more directly. Use percentages when their semantics improve a local rule and inheritance is controlled; otherwise prefer the simpler unitless form.

rem Line Height

A rem length follows the root font size rather than the current element. line-height: 1.5rem remains 1.5 root font sizes even when the element itself is a 3rem heading. That can produce a line box much smaller than the heading's glyph size.

.title {
  font-size: 3rem;
  line-height: 1.5rem;
}

Rem is useful for many global dimensions, but line height usually needs to track the current text. Unitless values are therefore more adaptable for general typography.

The normal Value

line-height: normal lets the user agent determine a preferred line height from font metrics and implementation behavior. It is not defined as exactly 1.2, even though values around that range are common in many fonts and browsers.

Normal can be appropriate when the font's default leading is suitable, particularly in native controls or isolated text. A design system often chooses explicit unitless ratios for consistency, but should not claim that normal has one universal numeric equivalent.

Understanding the Line Box

A line box is the rectangular area the inline formatting context uses for one line. Its block-axis size depends on contributions from inline-level contents, their line heights, alignment, replaced elements, and font metrics. The paragraph's line-height establishes a key contribution but does not make all inline content identical in height.

A simplified diagram often shows extra leading around text, which helps explain the visual effect. Real layout can include nested spans with larger fonts, icons aligned to the baseline, ruby annotations, or inline images that enlarge a particular line. Debug the actual line box rather than assuming every line equals one declared number.

Baselines, Ascenders, and Descenders

Glyphs sit relative to a baseline. Ascenders rise above the x-height in letters such as b and h, while descenders extend below the baseline in g, j, p, q, and y. Diacritics and script-specific marks can extend farther than typical Latin examples.

A comfortable line height gives these shapes enough visual separation from neighboring lines. The same ratio can feel different among fonts because ascender, descender, and x-height proportions differ. Always test all languages and marks the product displays.

Body Text Starting Points

Ratios around 1.4 to 1.7 are common starting points for body text, with 1.5 or 1.6 frequently producing comfortable paragraphs. These are design heuristics rather than universal requirements. A wide measure, small size, dense font, or complex script may need more room; short UI copy may need less.

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

article {
  line-height: 1.65;
}

Read several real paragraphs before standardizing the value. One sample sentence cannot reveal sustained reading comfort.

Heading Line Height

Large headings commonly use tighter ratios because their glyphs already create substantial vertical presence. A 3rem heading at 1.6 can separate wrapped lines so far that they stop reading as one title. Ratios around 1.0 to 1.2 are common starting points for large display text.

h1 {
  font-size: 3rem;
  line-height: 1.1;
}

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

Test letters with descenders, multi-line headings, and localized text. A ratio that works for uppercase English may clip or crowd another script.

A Practical Typography System

body {
  font-size: 1rem;
  line-height: 1.6;
}

h1 {
  font-size: 3rem;
  line-height: 1.1;
}

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

small {
  font-size: 0.875rem;
  line-height: 1.4;
}

The system assigns ratios by reading role rather than inheriting one value everywhere. Body text receives generous rhythm, headings stay visually grouped, and small text retains enough vertical space for legibility.

Line Height and Line Length

Line height and measure work together. On a very long line, the eye travels farther before returning to the next line and benefits from clearer vertical separation. On a narrow column, a slightly tighter ratio may preserve cohesion because the return path is short.

article {
  max-width: 65ch;
  line-height: 1.6;
}

Limiting measure often improves readability more effectively than continually increasing line height. Evaluate size, measure, family, and leading as one typographic system.

Font Family Changes the Result

Arial and Georgia at the same font size and line-height ratio do not occupy space identically. Their x-heights, ascenders, descenders, stroke patterns, and default metrics differ. A ratio of 1.5 may look spacious in one and compact in another.

Re-test line height whenever the primary font or fallback stack changes. Also test the page while a web font is loading and when it fails permanently. A fallback that is wider or taller can change wrapping and make rigid component dimensions fail.

Font Weight and Style Affect Density

Heavy text can make adjacent lines feel denser because strokes carry more visual mass. Italic faces may have different ascenders, descenders, and shapes from upright text. A line-height value selected for regular body copy may not suit a bold multi-line callout or an extended italic quotation.

Use hierarchy conservatively and test combined states. Do not assume that changing only weight or style leaves vertical rhythm perceptually unchanged.

Inline Elements and Mixed Sizes

Inline elements participate in the surrounding line. A strong element at the same size generally fits within the paragraph rhythm, while an inline badge, icon, or larger span can increase a line's required box height or create awkward alignment.

p {
  line-height: 1.6;
}

p .inline-icon {
  inline-size: 1em;
  block-size: 1em;
  vertical-align: -0.125em;
}

Inspect mixed inline content visually. Avoid arbitrary vertical offsets unless the icon artwork genuinely requires optical correction.

Buttons Need Padding, Not Artificial Leading

A large fixed line height is sometimes used to create button height and vertically center a single line. This fails when the label wraps, an icon is added, the font changes, or text spacing is overridden. Line height should serve the text; padding and layout should create the control box.

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7em 1.25em;
  line-height: 1.2;
}

This pattern supports icons, multiple lines, and accessible target sizing more reliably.

Inputs and Form Controls

Form controls need readable text and enough internal space for glyphs, focus indicators, platform rendering, and user scaling. Tight line height can crowd text or clip scripts with tall marks. Fixed control height compounds the problem.

input,
select,
textarea {
  font: inherit;
  line-height: 1.4;
  padding: 0.75em;
  box-sizing: border-box;
}

Use minimum height if controls need a shared baseline and allow multiline or content-bearing controls to grow. Test native select and input behavior across target browsers.

Navigation and Compact UI Labels

Navigation labels and compact controls often use ratios around 1.2 to 1.4 because they contain short text rather than paragraphs. The interactive target should still come from padding and minimum dimensions, not from squeezing or stretching the line box.

.nav-link {
  display: inline-flex;
  align-items: center;
  line-height: 1.25;
  padding: 0.75em 1em;
}

Test wrapped labels and translated navigation. A control may become two lines even when the original design assumed one.

Cards and Descriptions

Card titles benefit from compact grouping, while descriptions need a body-like rhythm. Assign each role its own ratio and let the card grow naturally rather than fixing height from one sample.

.card-title {
  font-size: 1.25rem;
  line-height: 1.25;
}

.card-description {
  font-size: 1rem;
  line-height: 1.5;
}

Use Grid or Flexbox alignment when repeated cards need visual organization. Truncation should be an explicit content decision, not an accidental result of line-height and fixed height.

Code Blocks

Code usually benefits from moderate spacing that keeps consecutive statements grouped while making punctuation and indentation easy to scan. Ratios around 1.4 to 1.6 are useful starting points depending on font and size.

pre {
  font-family: ui-monospace, monospace;
  line-height: 1.5;
  white-space: pre-wrap;
}

white-space controls preservation and wrapping, while line height controls vertical rhythm. Long-line overflow, wrapping, and line numbering need separate decisions.

Line Height Does Not Create Paragraph Spacing

Line height controls rhythm within a line-formatted block. It does not create a semantic gap between separate paragraphs. Increasing it to simulate paragraph spacing makes every line too far apart and weakens the paragraph as a visual unit.

article p {
  line-height: 1.6;
  margin-block: 0 1rem;
}

Use margins or container gap for space between elements. Keeping internal line spacing and external block spacing separate produces clearer, more maintainable typography.

Line Height and Vertical Rhythm

Vertical rhythm is the repeated pattern formed by lines, headings, paragraphs, lists, media, and sections. A consistent body line-height can provide a reference, but every margin does not need to be an exact multiple of the line box. Optical balance and component needs still matter.

Use spacing tokens that coordinate with typography, then inspect real pages containing mixed content. Mechanical baseline grids can become brittle when fonts, responsive sizes, translations, and user overrides change.

Responsive Typography

When font size changes fluidly with clamp(), a unitless line height follows automatically. The ratio can remain stable through the fluid range, or it can change at a content-driven breakpoint if large display text needs tighter leading.

.hero-title {
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
  line-height: 1.08;
}

Test intermediate widths, not only the minimum and maximum. Different wrapping points can reveal collisions or excessive gaps that endpoint screenshots miss.

Localization and Writing Systems

Line-height recommendations derived from Latin body text do not automatically fit every language or script. Diacritics, stacked marks, joining behavior, vertical writing, and font fallback can change the required space and visual balance.

Use real localized content and fonts that support the script well. Avoid clipping with fixed-height containers and hidden overflow. Work with language-specific typography guidance when a product serves scripts whose conventions differ from the default design system.

Accessibility and Text Spacing

Some users increase line, word, letter, and paragraph spacing to improve reading. A page must allow those overrides without clipping, overlap, disappearance, or loss of functionality. Flexible boxes, natural height, and responsive reflow are therefore as important as the authored line-height ratio.

People with low vision, dyslexia, cognitive disabilities, or other reading needs may benefit from customized spacing. Do not use !important to prevent user styles, and do not position text in containers that can only accommodate the original metrics.

Understanding WCAG Text Spacing

WCAG 2.2 Success Criterion 1.4.12 requires applicable content to tolerate user-applied settings including line height of at least 1.5 times font size, paragraph spacing of at least two times font size, letter spacing of at least 0.12 times font size, and word spacing of at least 0.16 times font size without loss of content or functionality.

This criterion does not require authors to set every paragraph to those values. It requires the implementation to remain usable when users apply them. The distinction matters: a design can use a deliberate 1.4 ratio and still conform if user overrides do not break it.

Avoid Fixed Heights Around Text

A card with height: 120px may fit default text and fail when line height, font size, or translation expands. Hidden overflow can then remove essential content without any obvious CSS error.

.card {
  min-height: 7.5rem;
  padding: 1rem;
}

Prefer natural height or a minimum that allows growth. If truncation is a product requirement, expose the complete content through an accessible expansion pattern and test it with overridden spacing.

Common Mistake: line-height of 1 for Body Text

A ratio of 1 makes the preferred line height equal to font size. In many body fonts, this leaves little separation for glyph metrics and creates a dense paragraph that is difficult to track. It may also expose overlap when fallback fonts or diacritics extend farther.

Start around 1.4 to 1.7 for sustained reading and adjust with actual content. Do not copy a heading ratio into body text merely for visual compactness.

Common Mistake: Excessive Body Leading

A ratio such as 3 creates so much vertical distance that lines stop reading as one paragraph. The reader must search for the next line, and a short article becomes unnecessarily long. More spacing is not always more accessible.

Balance separation with grouping. If paragraphs feel crowded, first examine font size, measure, and paragraph margins rather than forcing all vertical space into line height.

Common Mistake: One Fixed Value Everywhere

Applying 24 pixels to body text, headings, labels, and captions ignores their different font sizes and roles. A 16-pixel paragraph may look comfortable while a 48-pixel heading becomes severely cramped.

body { line-height: 1.5; }
h1 { line-height: 1.1; }
.label { line-height: 1.3; }

Use unitless role-based ratios so each element calculates an appropriate line height from its own font size.

Common Mistake: Using line-height to Center Controls

A button with matching height and line height appears vertically centered only while it remains a single line with no icons or user overrides. Wrapped text breaks the illusion, and glyph metrics can still make the result look off-center.

.button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  padding-inline: 1rem;
  line-height: 1.2;
}

Let layout align the content and let line height serve typography.

Common Mistake: Ignoring Font Changes

A new web font or fallback can alter x-height, ascenders, descenders, and line metrics while every CSS number remains unchanged. A previously comfortable ratio may become tight or loose, and text may wrap into additional lines.

Include line-height review in every font migration. Test successful loading, loading delay, and permanent failure. Typography quality depends on the rendered font, not only on the stylesheet declaration.

Common Mistake: Fixed Height Plus Hidden Overflow

A fixed text box combined with overflow: hidden can silently remove lines when spacing or font size increases. This is particularly dangerous for errors, instructions, consent text, and action labels because lost content can block task completion.

Use natural sizing and inspect overflow at 200 percent zoom and WCAG text-spacing overrides. If visual truncation is intentional, include an accessible control to reveal the complete text.

Recommended Starting Ranges

These ranges begin evaluation; they do not replace testing. Font metrics, language, line length, weight, and display conditions determine the final value.

Centralize Line-Height Roles

A design system can use semantic custom properties for recurring reading roles. This keeps hierarchy consistent while allowing components to override ratios when their content has a different purpose.

:root {
  --leading-body: 1.6;
  --leading-heading: 1.15;
  --leading-compact: 1.3;
}

body { line-height: var(--leading-body); }
h1, h2 { line-height: var(--leading-heading); }
.label { line-height: var(--leading-compact); }

Name tokens by role rather than number so the system can evolve without misleading identifiers.

Testing Readability

Read complete paragraphs at realistic widths instead of judging isolated lines. Test narrow and wide screens, browser zoom, larger default fonts, fallback fonts, translated content, long headings, validation messages, and dynamic updates. Include people and devices representative of the audience where possible.

Check whether the eye can return to the next line, headings remain grouped, and paragraph boundaries remain clear. Readability is observed behavior, not a formula that one ratio can guarantee.

Testing Text-Spacing Overrides

Apply the WCAG text-spacing values together through a user stylesheet, browser extension, bookmarklet, or test automation. Look for clipped text, overlap, obscured controls, horizontal scrolling in ordinary content, and interaction targets whose labels no longer fit.

Test drawers, dialogs, sticky headers, tables, cards, form errors, tooltips, and responsive navigation, not only article paragraphs. Problems usually come from fixed dimensions, absolute positioning, or overflow rules rather than from line height itself.

Debugging line-height

Use DevTools to inspect the specified value, computed font size, computed line height, inherited declarations, rendered font, and box dimensions. A unitless value may be displayed as a used pixel result in some panels, so trace the source declaration before assuming it was authored as a length.

Temporarily add backgrounds or outlines to inline and block boxes, remove fixed heights, and disable overflow clipping. Compare the primary and fallback fonts. Mixed-size inline elements and vertical alignment often explain a line that is taller than the parent's preferred line height.

Common Interview Questions

What does line-height control? It specifies a preferred line height used in line-box calculation and therefore strongly influences spacing between lines.

Why are unitless values usually preferred? The number inherits as a multiplier, so descendants calculate line height from their own font sizes.

If font size is 16px and line height is 1.5, what is the used line height? In the straightforward case, 16 multiplied by 1.5 equals 24 pixels.

Should headings use the body ratio? Not necessarily. Large headings usually need tighter ratios so wrapped lines remain grouped.

Does line height control paragraph spacing? No. Use margin or container gap between separate paragraphs.

Why can fixed pixel line height be problematic? It does not automatically adapt when descendant font sizes or user settings change.

Is normal always the same number? No. The user agent derives it from font metrics and implementation behavior.

Does WCAG require authors to set body text to 1.5? WCAG 1.4.12 requires layouts to tolerate specified user spacing overrides without loss, not that every authored paragraph must start at those values.

Practical Review Checklist

• Prefer unitless line height for inherited typography.
• Start body copy around 1.4 to 1.7 and test the actual font.
• Use tighter ratios for large headings while preserving glyph clearance.
• Evaluate line height together with measure, size, weight, and family.
• Use padding and layout, not oversized line height, for control sizing.
• Keep paragraph margins separate from internal line spacing.
• Avoid fixed heights and hidden overflow around essential text.
• Test fallback fonts, web-font loading, and every required language.
• Allow user styles to override text spacing without breakage.
• Check dialogs, navigation, errors, tables, and cards at increased spacing.
• Inspect computed line height and rendered fonts in DevTools.
• Prioritize sustained reading comfort over visual compactness.

Key Takeaway

line-height establishes the preferred vertical dimension that text contributes to line layout. A unitless value usually provides the most resilient inheritance because each element multiplies the shared ratio by its own font size. Body text commonly needs more breathing room, while large headings and compact controls often need tighter but still legible spacing.

Readability comes from the whole typography system: font, size, weight, line length, language, contrast, and content. Keep block spacing separate, use layout and padding for controls, avoid rigid text containers, and test user overrides. A successful line-height strategy remains comfortable in normal reading and remains functional when users enlarge text or adjust its spacing.