Typography Line Height Calculator

Line height is the total vertical distance from one baseline to the next, while leading is the extra space added beyond the font size: at 16px text with a 1.5 multiplier the line height is 24px and the leading is 8px. In the CSS box model that surplus is split into half-leading applied equally above and below the inline box, which is why the visual gap between two lines is smaller than the leading figure suggests and why the first line of a paragraph carries space above it. The multiplier should be chosen against the measure, because the two variables trade off: a short line of 40 characters tracks comfortably at about 1.3, a 60 to 70 character measure needs roughly 1.5, and a long line beyond 80 characters needs 1.6 to 1.8 for the eye to find the start of the next line reliably. Large display type works in the opposite direction, since headlines set at 40px or more usually need 1.1 to 1.25 or the lines drift apart. The unitless form is strongly preferred over px or em values because line-height is inherited as a computed number rather than a resolved length. A parent set to line-height 24px passes 24px to a child at 32px font size, producing overlapping lines; a parent set to 1.5 passes the ratio, so the child computes 48px. The browser default of normal is not a fixed number at all but a font-dependent value derived from the face's own metrics, typically between 1.1 and 1.3, which is too tight for body copy. Accessibility sets a floor: WCAG 2.1 success criterion 1.4.12 requires content to remain functional when line height within paragraphs is increased to at least 1.5 times the font size, so layouts must tolerate that spacing even if they do not adopt it by default.

The word leading is literal. In hand and machine composition, lines of metal type sat directly on one another unless the compositor inserted thin strips of lead alloy between them, commonly one or two points thick, and type set without them was described as set solid. A specification such as 10 on 12, still written 10/12, meant ten-point type with two points of lead, and that notation survives unchanged in digital software even though no metal is involved. The practice made leading a discrete quantity, available only in whole point increments, which is why traditional specifications cluster on round numbers. The empirical case for generous leading came from the reading research of Miles Tinker and Donald Paterson at the University of Minnesota, whose experiments from the late 1920s onward established the interaction between line width and line spacing and showed that wider measures required more leading to sustain reading speed, results summarised in Tinker's Legibility of Print in 1963. On the web, the line-height property was defined in the first CSS specification published by the W3C in 1996, and the decision to allow a unitless number that inherits as a ratio proved decisive for maintainable typography. Spacing then became an accessibility requirement rather than a stylistic preference: WCAG 2.0 in 2008 introduced success criterion 1.4.8 requiring at least space-and-a-half line spacing in blocks of text for visual presentation, and WCAG 2.1 in 2018 added the more testable text spacing criterion 1.4.12.