Line height in CSS - Deep Dive

Overview - Line height

What is it?

Line height in CSS controls the vertical space between lines of text. It determines how tall each line of text appears, affecting readability and the overall look of paragraphs. By adjusting line height, you can make text easier to read or create a specific style. It works like spacing between rows in a table but for text lines.

Why it matters

Without line height control, text can look cramped or too spread out, making reading uncomfortable or confusing. Proper line height improves clarity and user experience on websites, especially for long paragraphs or different screen sizes. It helps designers create visually balanced pages that guide the reader’s eye smoothly.

Where it fits

Before learning line height, you should understand basic CSS properties like font size and how text flows in HTML. After mastering line height, you can explore advanced typography techniques, responsive design for different devices, and CSS layout systems like Flexbox and Grid that also affect spacing.

Mental Model

Core Idea

Line height sets the vertical space each line of text occupies, balancing readability and style by controlling spacing between lines.

Think of it like...

Line height is like the space between shelves in a bookcase; too little space and books get squished, too much and the shelves look empty and disconnected.

Text block with line height:
┌─────────────────────────────┐
│ Line 1                     │
│                             │  ← line height space
│ Line 2                     │
│                             │  ← line height space
│ Line 3                     │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

What is line height in CSS

Concept: Introduce line height as a CSS property that controls vertical spacing between text lines.

In CSS, line height is a property you add to text elements to control how tall each line of text is. For example: p { line-height: 1.5; } This means each line is 1.5 times the size of the font height, creating space between lines.

Result

Text lines become spaced out vertically, making paragraphs easier to read.

Understanding line height as a multiplier of font size helps you control text spacing consistently across different fonts and sizes.

2

Foundation

Different ways to set line height

Concept: Explain the three main ways to specify line height: unitless number, length units, and percentage.

You can set line height in CSS using: 1. Unitless number (e.g., 1.5) — multiplies the font size. 2. Length units (e.g., 24px, 1.5rem) — fixed height. 3. Percentage (e.g., 150%) — percentage of font size. Example: p { line-height: 24px; } or p { line-height: 150%; }

Result

Different methods give you flexible control: relative spacing with unitless, fixed spacing with lengths, or percentage-based spacing.

Knowing these options lets you choose the best approach for responsive design or fixed layouts.

3

Intermediate

Why unitless line height is preferred

🤔Before reading on: do you think setting line height as a fixed pixel value or a unitless number is better for responsive text? Commit to your answer.

Concept: Explain why unitless line height scales better with font size changes and inheritance.

Using a unitless number like 1.5 means the line height scales automatically if the font size changes. For example, if a child element has a different font size, the line height adjusts proportionally. Fixed units like pixels do not scale, which can cause inconsistent spacing. Example: body { font-size: 16px; line-height: 1.5; /* equals 24px */ } h1 { font-size: 32px; /* line-height becomes 48px automatically */ }

Result

Text spacing remains consistent and proportional across different font sizes and elements.

Understanding unitless line height as a ratio unlocks better responsive and maintainable typography.

4

Intermediate

How line height affects element height

🤔Before reading on: does line height only add space between lines, or does it also affect the total height of the text block? Commit to your answer.

Concept: Show that line height affects the total height of text containers, influencing layout and alignment.

Line height not only adds space between lines but also changes the total height of the text block. This affects how elements align vertically with others. For example, a paragraph with 3 lines and line-height 1.5 will be taller than with line-height 1.0. This matters when aligning text with images or buttons nearby.

Result

The height of text containers changes, impacting page layout and vertical alignment.

Knowing line height affects container height helps avoid unexpected layout shifts and alignment issues.

5

Intermediate

Line height inheritance and cascading

🤔Before reading on: do you think line height is inherited by child elements by default? Commit to your answer.

Concept: Explain how line height is inherited in CSS and how it cascades through nested elements.

Line height is an inherited property in CSS, meaning child elements get the line height of their parent unless they override it. Example: body { line-height: 1.6; } p { /* inherits 1.6 unless changed */ } span { line-height: 1.2; /* overrides inheritance */ } This inheritance helps keep consistent spacing but can be customized where needed.

Result

Text inside nested elements maintains consistent spacing unless explicitly changed.

Understanding inheritance prevents confusion when nested text looks different than expected.

6

Advanced

How browsers calculate line height internally

🤔Before reading on: do you think line height is exactly the value you set, or does the browser adjust it? Commit to your answer.

Concept: Reveal the browser’s internal process for calculating line height and vertical alignment of text.

Browsers calculate line height by combining the font's metrics (like ascent and descent) with the line-height value. The line box height is the maximum of font height and line height. Browsers also add space above and below text to center it vertically. This means the actual space can differ slightly from the CSS value due to font design and rendering rules.

Result

Line height visually balances text vertically, not just adding fixed space.

Knowing this explains why line height can look different across fonts and browsers, helping debug spacing issues.

7

Expert

Surprising effects of line height on inline elements

🤔Before reading on: does line height affect only block text, or can it change inline elements like images or icons? Commit to your answer.

Concept: Explore how line height influences inline elements and vertical alignment in complex layouts.

Line height affects the height of line boxes, which contain inline elements like images or icons. If line height is large, inline elements may appear vertically centered with extra space above and below. This can cause unexpected gaps or alignment shifts in buttons or menus with icons. Example: button { line-height: 2; } img { vertical-align: middle; } The large line height creates extra space around the image inside the button.

Result

Inline elements' vertical position and spacing change with line height, affecting layout.

Understanding line height’s effect on inline elements helps fix subtle UI bugs and create polished designs.

Under the Hood

Line height works by defining the minimum height of a line box, which is the container for inline content in a line. The browser uses font metrics like ascent (top of tallest letter) and descent (bottom of lowest letter) to calculate the font's natural height. The line height value sets the minimum height for this box. If the font's natural height is smaller, extra space is added above and below to meet the line height. This space affects vertical alignment and spacing between lines.

Why designed this way?

Line height was designed to separate font size from vertical spacing, allowing flexible control over readability and style. Early web browsers had inconsistent text spacing, so CSS introduced line height to standardize and improve text layout. Using a unitless multiplier was chosen to allow proportional scaling with font size, supporting responsive design and inheritance. Fixed units exist for precise control but are less flexible.

┌───────────────────────────────┐
│ Line Box (height = line-height)│
│ ┌───────────────────────────┐ │
│ │ Font Ascent               │ │
│ │ ┌───────────────┐        │ │
│ │ │ Glyphs/Text   │        │ │
│ │ └───────────────┘        │ │
│ │ Font Descent              │ │
│ └───────────────────────────┘ │
│ Extra space above and below    │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does setting line-height to 1.5 mean exactly 1.5 times the font size in pixels? Commit to yes or no.

Common Belief: Line height 1.5 means the line is exactly 1.5 times the font size in pixels.

Reality: Line height 1.5 is a multiplier, but the actual pixel height depends on font metrics and browser rendering, so it may not be exactly 1.5 times font size.

Why it matters: Assuming exact pixel height can cause layout bugs when switching fonts or browsers, leading to unexpected spacing.

Quick: Does line height only add space between lines, not affect the total height of the text block? Commit to yes or no.

Common Belief: Line height only adds space between lines and does not change the total height of the text block.

Reality: Line height affects the total height of the text block because it sets the minimum height of each line box, which stacks vertically.

Why it matters: Ignoring this causes misalignment with other page elements and unexpected overflow or gaps.

Quick: Does setting line height in pixels always produce consistent spacing across different font sizes? Commit to yes or no.

Common Belief: Using pixel values for line height always gives consistent spacing regardless of font size changes.

Reality: Pixel line heights are fixed and do not scale with font size, causing inconsistent spacing if font size changes.

Why it matters: This breaks responsive design and can make text look cramped or too spaced on different devices.

Quick: Does line height affect inline elements like images inside text? Commit to yes or no.

Common Belief: Line height only affects text lines, not inline images or icons.

Reality: Line height affects the height of line boxes containing inline elements, influencing their vertical alignment and spacing.

Why it matters: Ignoring this leads to unexpected gaps or misaligned icons in buttons and menus.

Expert Zone

1

Unitless line height values are inherited as ratios, not fixed lengths, which means child elements with different font sizes get proportional spacing automatically.

2

Browsers add half of the extra line height space above and half below the text baseline to center text vertically within the line box, which can cause subtle differences between fonts.

3

Line height interacts with vertical-align on inline elements, so adjusting one without the other can cause unexpected layout shifts.

When NOT to use

Avoid using fixed pixel line heights in responsive or multi-font environments; instead, use unitless values for scalability. For precise control in graphic design contexts, fixed lengths may be appropriate. When working with complex inline layouts, consider adjusting vertical-align alongside line height.

Production Patterns

In production, designers use unitless line heights for body text to ensure readability across devices. Headlines may use fixed or percentage line heights for exact styling. Inline icons inside buttons often require careful line height and vertical-align tuning to avoid visual glitches. CSS frameworks set sensible default line heights for consistency.

Connections

Typography

Line height is a fundamental part of typography that controls vertical rhythm and readability.

Understanding line height in CSS deepens appreciation for traditional print typography principles like leading, improving web text design.

Responsive Design

Line height set as a unitless multiplier supports responsive design by scaling spacing with font size changes.

Knowing this helps create flexible layouts that adapt gracefully to different screen sizes and user settings.

Music Notation

Line height in text is like spacing between staff lines in music notation, which affects readability and clarity.

Recognizing this cross-domain similarity highlights how spacing controls visual flow and comprehension in different fields.

Common Pitfalls

#1 Using fixed pixel line height for all text regardless of font size changes.

Wrong approach:

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

h1 {
font-size: 32px;
/* line-height stays 24px, looks cramped */
}

Correct approach:

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

h1 {
font-size: 32px;
/* line-height becomes 48px automatically */
}

Root cause:

Misunderstanding that fixed units do not scale with font size, causing inconsistent spacing.

#2 Setting line height too small, causing text lines to overlap.

Wrong approach:

p {
line-height: 0.8;
}

Correct approach:

p {
line-height: 1.4;
}

Root cause:

Not realizing line height must be at least enough to fit tallest characters and spacing for readability.

#3 Ignoring line height effects on inline elements, causing vertical misalignment.

Wrong approach:

button {
line-height: 2;
}

button img {
vertical-align: baseline;
}

Correct approach:

button {
line-height: 2;
}

button img {
vertical-align: middle;
}

Root cause:

Not understanding line height affects line box height and inline element alignment.

Key Takeaways

Line height controls the vertical spacing between lines of text, crucial for readability and style.

Using unitless line height values ensures spacing scales proportionally with font size, supporting responsive design.

Line height affects the total height of text blocks and the vertical alignment of inline elements, impacting layout.

Browsers calculate line height using font metrics and add space to center text vertically, which can vary by font.

Understanding line height inheritance and its interaction with other CSS properties helps avoid common layout bugs.