Leading Calculator

Line spacing from font size and reading context.

Font size (px)

Line-height ratio

x-height ratio

Lines per block

Tab to move between fields

Leading (line height, px)

Half-leading (px)4

Baseline-to-baseline (px)24

Text block height (px)480

CSS line-height value1.5

Readability score100/100

How to Use This Calculator

How the result changes with Font size (px)

Font size (px): The font size in pixels (or points — they are nearly 1:1 on screen).
Line-height ratio: Multiplier of font size. 1.0 = solid set (no extra space); 1.5 = 150% of font size.
x-height ratio: Ratio of x-height to cap height for your typeface. Larger x-height fonts (e.g. 0.7) need more leading.
Lines per block: Number of lines in your text block, used to compute total block height.

Leading (line height, px): Total line height in pixels — the distance from one line box top to the next.
Half-leading (px): Space added above and below the text within a line box (CSS half-leading model).
Baseline-to-baseline (px): Distance between consecutive baselines — equals the line height.
Text block height (px): Total height of the paragraph (lines × line height).
CSS line-height value: Unitless CSS line-height value to use in your stylesheet.
Readability score: Heuristic score (0–100) based on how close leading is to the optimal ratio for your x-height.

Identify Input Parameters
4 parameters
Font size (px) = 16, Line-height ratio = 1.5, x-height ratio = 0.5, Lines per block = 20 = 4 input(s) provided
Calculate Leading
Leading = fontSize * lineHeightRatio
24 = 24
Calculate Half-leading
Half-leading = (leadingPx - fontSize) / 2
4 = 4
Calculate Baseline-to-baseline
Baseline-to-baseline = leadingPx
24 = 24