ColorKitFree line height calculator
Leading depends on the measure, not just the size
Give this free calculator a font size and the width of the column the text sits in, and it returns a unitless line-height, the line box it produces in pixels, and the half-leading each line carries above and below. No signup, and every figure is worked out in the page you are reading. The characters-per-line estimate is plotted against the 45 to 75 window that running text wants to stay inside, and a two-paragraph specimen renders at your exact width so you can count the wrap instead of trusting the estimate.
- 100% free
- No signup
- Measure-aware
- 45-75 window
- Live specimen
Press Ctrl+V anywhere on the page to drop in a font size, or a whole font-size declaration — no need to click the field first.
Measure — 80 characters per line
At 80 characters the eye has a long way back and starts re-reading lines. Narrow the column, raise the size, or accept that the leading has to go up to compensate.
Recommended leading
1.63
- Line box
- 26.08px
- Leading added
- 10.08px
- Half-leading above
- 5.04px
- Half-leading below
- 5.04px
Clears the 1.5 that WCAG 2.1 SC 1.4.12 expects body text to survive being set to.
Specimen at 640px wide
Set a paragraph of ordinary prose at the size and width you are planning to ship, and the answer usually presents itself in a second or two. Text that is too tightly led looks like a grey block; text that is too loosely led falls apart into separate stripes with the page showing through between them.
Change one control at a time and watch this block rather than the numbers above it. A quarter of a point either way on the multiplier is the difference between a paragraph that holds together and one that does not.
Count a line of the specimen if you want the real figure — the 80 above is an estimate from a 0.5em average character width and lands within about 8% for running English text.
How to set line height for a column of text
Two inputs and a look at the specimen, because leading is a relationship rather than a value.
Give it both numbers, not just the size
Enter the font size in pixels, then the column the text sits in — either as a width in pixels or, if you already know it, as a count of characters per line. Leading that is right for 16px text in a 640px column is wrong for the same 16px text in a 320px sidebar, and a calculator that asks only for the size cannot know which one you have.
Check where the measure lands
The bar marks the 45 to 75 character window that a single column of running text wants to sit inside. Short measures cost you rhythm — the reader spends more effort turning corners than taking in words — and long ones cost you accuracy, because finding the next line becomes a guess. If the marker sits outside the window, changing the column width is a better fix than pushing the leading up to compensate for it.
Read the leading, then look at the specimen
The recommendation appears as a unitless multiplier with the line box, the added leading and the half-leading above and below spelled out in pixels. The specimen underneath renders two paragraphs at your exact width, size and leading in a face of the width class you selected, so you can count a line and see whether the estimate held. The slider lets you overrule the recommendation and watch the specimen move, and the copy button takes the three declarations with it.
Technical specifications
| Model | line-height = 1.5 − 0.22 × log2(size ÷ 16) + (characters per line − 60) ÷ 150, clamped to the range 1.05 to 2.00 |
|---|---|
| Anchor point | 16px text on a 60-character measure returns exactly 1.50, which is where the conventional advice sits |
| Measure window | 45 to 75 characters, marked on the bar; the marker turns orange outside it rather than silently accepting the number |
| Character-width presets | 0.44em condensed, 0.48em serif, 0.50em sans, 0.60em monospace — average advance width of mixed-case English |
| Input range | Font size 8 to 160px and column width 120 to 1600px, or a character count entered directly from 2 to 400 |
| Reported values | Unitless multiplier to 2 decimals, the line box in px, the added leading, and the half-leading above and below |
| Accessibility check | Sizes of 20px and under are flagged against the 1.5 line-height that WCAG 2.1 SC 1.4.12 expects content to survive |
| Specimen | Two paragraphs of real prose set at the exact width, size and leading, so the estimate can be checked by counting |
Frequently asked questions
What line height should body text have?
1.5 for 16px text on a 60-character measure, and the number moves from there in both directions. Narrow that column to 45 characters and 1.4 reads better; widen it to 90 and you need about 1.7 to keep the return sweep reliable. The single figure quoted everywhere is really an answer to one specific combination of size and measure that happens to be very common.
Why unitless instead of px or em?
Because a unitless value is passed down the tree as a multiplier, while a length is passed down already resolved. Set line-height: 24px on a container whose font-size is 16px, and a child heading at 32px inherits 24px of leading — the lines physically overlap. Set line-height: 1.5 on the same container and the child computes its own 48px. This is the single most common line-height bug in a real stylesheet, and it only appears once someone nests something.
Why does my heading sit too low inside its box?
Because CSS splits the extra leading equally above and below the text, and a large heading has a lot of extra. A 48px heading at line-height 1.5 has a 72px line box and therefore 12px of half-leading sitting above the cap height before any padding you added. Designers measure from the cap, browsers measure from the line box, and the 12px gap is where the argument in every design review comes from.
How can you estimate characters per line without knowing my font?
By using the average advance width of mixed-case English text, which is close to half the em for most humanist sans faces and a little under that for serifs. The four presets here are 0.44em condensed, 0.48em serif, 0.50em sans and 0.60em for monospace, where the figure is exact rather than averaged. The estimate lands within about 8% for running prose, which is enough to place the marker in or out of the window; the specimen is there for when you need the actual count.
Should a heading use the same leading as body copy?
No — larger type needs proportionally less, and the model here drops 0.22 for every doubling of the size. A 48px heading across a 40-character measure lands exactly on the 1.05 floor, which is roughly what a display face wants; giving it the 1.5 from your body styles adds 24px of air between two lines of a title and makes it read as two separate titles. The relationship reverses at the small end: 12px legal text on a wide column wants more than 1.5, not less.
Does line-height change the height of a single-line button?
Yes, and it is why buttons come out taller than their padding suggests. A 14px label at 1.5 produces a 21px line box, so a button with 12px of vertical padding is 45px tall, not 38px. Setting line-height: 1 on single-line controls is the usual fix, and it is safe there precisely because there is no second line for the leading to separate.
About leading, measure and the return sweep
Reading is not a smooth glide along a line. The eye fixates for something like 200 milliseconds, takes in seven or eight characters, saccades forward, and at the end of the line performs a long backward jump to find the start of the next one. That return sweep is what leading pays for: the further back the eye has to travel, the more likely it is to land on the line it has just read, and the wider the target has to be to stop that happening. This is why line height cannot be derived from font size alone, and why the standard advice to use 1.5 is really advice about one common combination of size and column width rather than a constant.
CSS implements leading in a way that surprises people the first time it bites. The difference between the line box and the font's own content area is split into two equal halves and placed above and below the text, so a large heading carries a slab of empty space above its cap height that no padding rule put there. Worse, the value of normal is not a number at all — it is taken from the font's own vertical metrics and lands anywhere between about 1.1 and 1.4 depending on which family in your stack actually loaded. Two fonts with the same size can therefore produce different line boxes, which is a good reason to state a number, and a good reason to check it against the family you shipped rather than the one you designed in. If the pairing is still open, the font pairing page is upstream of this decision.
The accessibility floor is worth knowing precisely. WCAG 2.1 SC 1.4.12 Text Spacing does not require you to ship 1.5 — it requires that nothing breaks when a reader forces line-height to 1.5 times the font size, along with paragraph spacing at 2 times. In practice a layout that already sits near 1.5 for body copy passes without effort, and one built on fixed-height rows fails immediately. Leading is also the second of three numbers a piece of type needs: the type scale settles the size, tracking settles the horizontal spacing, and the three move together — tighten the measure and you can tighten the leading with it. When you need to express the result the other way round, rem to px turns the rem figure back into the pixel value a design file wants.
Where these measurements are made
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.