Leading Calculator
Line spacing from font size and reading context.
About this calculator
Leading — the total vertical space a line of text occupies — is computed here as simply font size times a line-height ratio, matching how CSS unitless line-height works: a 16px font with a 1.5 ratio produces 24px of leading. From that, the calculator derives the CSS half-leading value (the space split evenly above and below the text within its line box), the baseline-to-baseline distance (equal to leading itself), and total block height for a given number of lines. The readability score is the more interesting piece: rather than treating one line-height ratio as universally "correct," it computes an ideal ratio as a function of your typeface's x-height proportion (1.2 plus 0.6 times the x-height ratio), reflecting the real typographic principle that fonts with tall x-heights need proportionally more leading to stay readable, while small-x-height faces can sit tighter.
The score then penalizes deviation from that computed ideal, dropping 80 points per full unit of ratio mismatch. A perfect 100 means your chosen ratio matches the ideal for your font's proportions exactly; scores well below that suggest either cramped or overly airy line spacing for the specific typeface you're setting. Use it to sanity-check a design-system line-height token, not as a substitute for eyeballing real paragraphs at your actual font.
Inputs
Results
Leading (line height, px)
24
How to Use This Calculator
- Enter Font size (px), Line-height ratio, and x-height ratio.
- Set Lines per block.
- Review the Leading (line height, px) result.
- Use Half-leading (px) and Baseline-to-baseline (px) to inform your decision.
How the result changes with Font size (px)
| Font size (px) | Leading (line height, px) |
|---|---|
| 8 | 12 |
| 12 | 18 |
| 24 | 36 |
| 40 | 60 |
What each input means
- 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.
What each result means
- 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.
How this is calculated
Worked example, using the default values
- Identify Input Parameters4 parametersFont size (px) = 16, Line-height ratio = 1.5, x-height ratio = 0.5, Lines per block = 20 = 4 input(s) provided
- Calculate LeadingLeading = fontSize * lineHeightRatio24 = 24
- Calculate Half-leadingHalf-leading = (leadingPx - fontSize) / 24 = 4
- Calculate Baseline-to-baselineBaseline-to-baseline = leadingPx24 = 24
Engine last updated . Checked against 3 independently-derived tests — how we verify calculators. Built by Paul Gunder, a software engineer, not a licensed financial, medical, or legal professional.
Frequently Asked Questions
Why does the ideal line-height ratio change based on my x-height input instead of being a fixed number?
The calculator computes the ideal ratio as 1.2 plus 0.6 times your x-height ratio, which reflects a real typographic principle: typefaces with a large x-height (lowercase letters that occupy more of the cap-height, like Verdana) visually appear denser at a given line-height and need more leading to stay comfortable to read, while small-x-height faces can sit tighter. A font with x-height ratio 0.5 gets an ideal of 1.5, while one at 0.7 gets 1.62 — so the same line-height ratio can score very differently depending on which typeface you're setting.
What does a readability score below 100 actually mean for my design?
The score subtracts 80 points for every full unit of difference between your chosen line-height ratio and the ideal ratio computed from your x-height, so a score of 60 means your ratio is off from ideal by exactly 0.5 — noticeably either too tight or too loose for that typeface's proportions. It's a heuristic penalty, not a hard readability threshold, so a score in the 80s or 90s generally represents fine, usable spacing rather than a problem to fix.
Why is half-leading useful, and how is it different from the leading value itself?
Leading is the full line-height box (font size times your ratio), but text doesn't sit flush against the top of that box — CSS and most typesetting systems split the extra space evenly above and below the glyphs, and half-leading is exactly that split value: (leading minus font size) divided by two. It matters when you're precisely aligning text to a baseline grid or calculating the visual gap above a heading, since half-leading is the space you'd need to subtract to align the cap-height, not the box top, with a target line.
If I increase my font size, does the leading ratio I've chosen stay optimal?
Yes for the pixel leading value, which scales proportionally with font size since leading is just font size times your ratio — but the ideal ratio itself doesn't depend on font size at all, only on your x-height ratio input. That means a line-height ratio tuned for readability at 16px stays equally appropriate at 48px for the same typeface, as long as the typeface's x-height proportions haven't changed.
Related Calculators
The questions that sit next to this one — chosen by subject, including calculators filed under a different category.
More in Creative, Media & Design.