What is line-height in CSS?

CSS line-height sets the vertical space between lines of text. A unitless value (e.g., 1.5) multiplies the element's font size, making it scale automatically with font changes. Values around 1.4–1.6 are standard for body text.

Why does line length affect recommended line-height?

Longer lines need more vertical space between them so the reader's eye can track back to the start of the next line without losing place. Shorter columns (45–65 characters) can use tighter line-height (1.3–1.45); wide columns need 1.5–1.6 or more.

Should I use a unitless value or pixels for line-height?

Unitless values (e.g., 1.5) are strongly preferred. They inherit correctly and scale with font-size changes. Pixel or em values for line-height can cause inheritance issues in nested elements.

What line-height is recommended for headings?

Display headings (H1, H2) typically use 1.05–1.2 — tighter than body text because the characters are large enough that extra space feels awkward. Subheadings (H3, H4) usually sit at 1.2–1.35.

What is the ideal characters-per-line for readability?

Most readability research places the sweet spot at 45–75 characters per line for body text. Below 45 feels choppy; above 90 strains the eye tracking back to the next line start.

Line Height Recommender

Name: Line Height Recommender
Availability: InStock
Author: Nham Vu

Enter font size and line length to get recommended CSS line-height values for body text, headings, and captions.

Typography Inputs

Font Size (body)

Line Length (measure)

Characters Pixels

Use Context

Line Length Assessment

—

Too narrow Ideal (45–75 ch) Too wide

Body Text

1.50

line-height

Headings

1.15

line-height

Captions

1.35

line-height

Why these values?

—

Live Preview

Reflects your inputs

Heading One Example

Good line-height keeps text comfortable to read. It scales with font size and adapts to how wide your text column is — a wider measure needs more vertical breathing room so the reader's eye can track back to the start of the next line without losing its place.

Caption: supplementary note in smaller type.

CSS Variables

Copied!

Summary

Enter font size and line length to get recommended CSS line-height values for body text, headings, and captions.

How it works

Enter your body font size in pixels (typically 14–20px).
Set the line length (measure) — the width of your text column in characters or pixels.
Choose a text style context: editorial, UI, or dense data.
Review the recommended line-height values for body text, headings, and captions.
Copy the CSS snippet to paste directly into your stylesheet.

Use cases

Set readable line spacing for a blog or long-form article layout.
Fine-tune heading line-height for tight, professional display type.
Adjust caption and label spacing in compact UI components.
Validate existing line-height values against typographic best practices.
Generate CSS variables for a design system with consistent vertical rhythm.
Compare how line-height interacts with measure (line length) before committing to a layout.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu