Leading

Leading in CSS is expressed as line-height, a multiplier of the font size. A line-height of 1.5 on 16 px text gives 24 px of vertical space between lines. Body text typically needs 1.4 to 1.6; display headings work better at 1.1 to 1.25. Too much leading makes a block feel like a list; too little makes it hard for the eye to find the next line. The type scale calculator exposes line-height alongside font size for every step in the scale.

Using a single line-height everywhere. A line-height of 1.5 works well for body text at 16 to 18 px. The same value at 12 px produces cramped text; at 24 px it produces gaps that break the block into separate lines. Adjust line-height for each size context.

Forgetting that line-height is a multiplier. When font-size changes, the actual pixel gap changes proportionally. A line-height of 1.5 on 16 px gives 24 px between baselines; on 12 px it gives 18 px. This is correct behavior, but it means the perceived density shifts when sizes change.

The right line-height depends on the job the text is doing. Long-form articles and documentation accept 1.5 to 1.7, because the eye needs a clear return path between lines. Interface copy with shorter paragraphs works at 1.4 to 1.5. Headings should sit between 1.1 and 1.25 so multi-line titles read as one unit rather than a list, and tight leading lets a two-line heading take up little vertical space.

CSS accepts a unitless line-height on the parent element, which is the safest choice because children inherit a multiplier instead of a fixed pixel value. Leading and measure interact: wider columns need more leading, and fonts with large x-heights can run a little tighter. The type scale calculator exposes line-height at every step, so the rhythm you design in the tool can be copied straight into the stylesheet.