What is line-height?

Line-height in CSS creates readable, comfortable text by giving the reader’s eyes room to move between lines. If the line-height is too small, the text feels cramped and hard to read. If it’s too large, the lines drift apart and the paragraph feels disconnected.

A practical starting point for body text is a unitless line-height of 1.5. The browser default, the keyword normal, works out to roughly 1.2 on desktop browsers, which is why unstyled paragraphs often feel tight. Headings usually read well slightly tighter than body text. The right value still depends on the font-family, the font size, and the length of your lines, so start at 1.5, then test and adjust.

Accessibility adds a separate requirement. WCAG 2.2’s Text Spacing success criterion (Level AA) doesn’t force a minimum line-height. Instead, it requires that no content or functionality is lost when a reader overrides your spacing to at least 1.5 times the font size. Roomier spacing helps people with low vision and cognitive conditions such as dyslexia, so check that your layout survives that override without clipping or overlapping text.

The related print term leading (pronounced “ledding”) comes from the days of metal type, when printers inserted strips of lead between lines of type to increase the vertical space. CSS line-height is the web’s descendant of that practice.

Line-height values in CSS

The line-height property accepts four kinds of value, and a rule is as short as p { line-height: 1.5; }. In vertical writing modes, the same property sets the width of each line box instead of its height.

• normal: the browser default, roughly 1.2 on desktop browsers, varying with the font family.
• A unitless number such as 1.5: multiplied by the element’s own font size. MDN’s line-height reference calls this the preferred form in most cases.
• A length such as 24px or 1.5em: a fixed height for every line.
• A percentage such as 150%: relative to the element’s font size, computed once to a fixed length.

The unitless form is preferred because of inheritance. Length and percentage values are passed to child elements as a fixed computed length, so a child with a larger font size keeps the parent’s line spacing and its lines turn out too tight. A unitless number is inherited as the number itself and recalculates against each element’s own font size. It also keeps the line height scaling in proportion when the page is zoomed to increase the text size. Unless you need a fixed line box, use the unitless form.

Converting line-height to pixels

To convert a line-height to pixels, multiply it by the element’s font size. A 16px font with a line-height of 1.5 produces 24px lines, the same font at the 1.2 default produces 19.2px lines, and a 12px font with a line-height of 120% computes to 14.4px (12 × 1.2). Because the multiplication runs on the font size, the same line-height yields different pixel values as your text scales.

Line-height vs. letter-spacing

These two typography properties are easy to confuse, but they work on different axes:

• Line-height controls the vertical space between lines of text.
• Letter-spacing controls the horizontal space between characters within a line.

If a paragraph feels dense, adjust the line-height first. If individual words look jammed together, look at the letter-spacing instead.