Leading Baseline Relation

Vertical Leading (Line-Height)

Leading (it rhymes with “heading”, and the name comes from the lead strips printers once slid between rows of metal type) is the vertical space between the baselines of consecutive lines. CSS expresses it as line-height, best written as a unitless multiplier of the font size. The math is leading = font-size × line-height, so a 16px body with line-height: 1.5 gives you 24px of leading.

A few ratios show up again and again: 1.5× the font size for default web body text, 1.2× for compact headings, and 1.7× or more when you want comfortable long-form reading. In Elements of Typographic Style, Robert Bringhurst suggests starting at roughly 30% above the body size. Matthew Carter and other type designers make a related point: line-height should grow as the line gets longer, since wider columns need more leading to help the eye find its way back to the next line.

Applications

Think web typography (line-height), editorial print, e-book layout, technical documentation, and the baseline grids in Adobe InDesign that line text up across columns. Design systems like Tailwind hand you ready-made steps: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2).

FAQ

Unitless or px line-height? Go unitless. line-height: 1.5 inherits in proportion, while line-height: 24px stays locked at one value and breaks child elements that use a different font size.

Why tighter for headings? Big display text already carries plenty of visual weight, so 1.5 leading just leaves gaps of empty vertical space. Somewhere around 1.1–1.25 keeps a heading feeling like one block.

What is a baseline grid? It is a horizontal grid where every line of text snaps to the same vertical rhythm, usually a multiple of the body leading such as 8px increments. Editorial design relies on it constantly.