Leading Calculator

Leading and line height are related but not identical. Line height is the total vertical space allotted to a line, here font size times the ratio; leading in the traditional sense is the surplus, line height minus font size. CSS splits that surplus equally above and below as half-leading, so 16px type at a ratio of 1.5 fills a 24px line box with 4px clearance each side. Print states the same relationship as a pair of point values - 10 on 12, written 10/12 - which is why the conversion at 0.75 point per CSS pixel still appears in specifications shared between screen and press. The correct amount depends chiefly on measure, because leading is what helps the eye find the start of the next line after a return sweep. Short lines near 40 characters read comfortably at about 1.3; the usual body range of 55 to 70 characters wants roughly 1.5; beyond 85 characters, 1.6 to 1.7 is needed or readers double back. Content type shifts the target too: headings are set tighter because their few large lines need no help tracking across, while captions, code and legal text take slightly more. Two constraints matter. WCAG 2.1 Success Criterion 1.4.12 requires content to stay usable when line height is raised to 1.5 times the font size, so a design that breaks there has an accessibility fault. And vertical rhythm only holds if line height is a whole number of grid units, which is why fractional ratios need rounding to land on a 4px or 8px baseline grid.

The term is literal. In hand and machine composition, lines of type were separated by inserting strips of lead alloy, usually one or two points thick, between the lines of sorts; setting without them was solid composition, and adding them was leading. That physical origin explains the traditional notation, since the compositor had to state both the body size of the type and the total distance from one line to the next, as in 10 on 12. Linotype machines from the 1880s onward cast a whole line as a single slug, with the leading built into the slug body, making the size-on-size figure the natural way to specify a job. Photocomposition in the 1960s decoupled the two values, since film could be advanced by any amount, and negative leading - lines closer together than the type size - became possible for the first time. When Cascading Style Sheets Level 1 arrived in 1996 the property was named line-height rather than leading, and it was defined to measure baseline-to-baseline distance with the extra space split evenly above and below, the half-leading model that CSS2 spelled out in its inline formatting rules. The initial value, normal, is left to the user agent and usually resolves near 1.2 times the font size, which is why unstyled web text looks cramped. Web accessibility work later pushed a firmer floor: WCAG 2.1, published in 2018, made a 1.5 line-height setting an explicit conformance test.