Line Length & Vertical Rhythm
Set a readable measure and a baseline grid, plus why a 45 to 75 character line pins your column width and why almost no line-height fits a grid.
Character counts assume an average advance of 0.5 em, the usual working figure for prose in a humanist sans. Every width on this page inherits that approximation, so treat them as a band rather than a boundary. Nothing is uploaded.
A comfortable measure pins the column width hard
Prose reads comfortably at roughly 45 to 75 characters a line. Fix the font size and that stops being a guideline and becomes a width: at 16px it allows a column between 360px and 600px, and nothing outside it.
| Font size | 45 characters | 75 characters | Characters at 700px |
|---|---|---|---|
| 14px | 315px | 525px | 100 |
| 15px | 338px | 563px | 93 |
| 16px | 360px | 600px | 88 |
| 17px | 383px | 638px | 82 |
| 18px | 405px | 675px | 78 |
| 20px | 450px | 750px | 70 |
The last column is the useful one. A 700px column holds 100 characters at 14px — well past the top of the range — and 70 at 20px, which is comfortable. So the cure for a too-wide column is bigger type, not a narrower column, which is the opposite of the instinct. Narrowing fixes it too, but you were probably attached to the width.
A baseline grid rejects almost every nice line-height
Sitting text on a 8px grid means font-size × line-height must be a multiple of 8. Of the 36 combinations below, 3 qualify. The rest are off by fractions of a pixel that accumulate down the page.
| Font | 1.4 | 1.45 | 1.5 | 1.55 | 1.6 | 1.75 |
|---|---|---|---|---|---|---|
| 14px | 19.60 | 20.30 | 21.00 | 21.70 | 22.40 | 24.50 |
| 15px | 21.00 | 21.75 | 22.50 | 23.25 | fits | 26.25 |
| 16px | 22.40 | 23.20 | fits | 24.80 | 25.60 | 28.00 |
| 17px | 23.80 | 24.65 | 25.50 | 26.35 | 27.20 | 29.75 |
| 18px | 25.20 | 26.10 | 27.00 | 27.90 | 28.80 | 31.50 |
| 20px | 28.00 | 29.00 | 30.00 | 31.00 | fits | 35.00 |
16px at 1.5 gives exactly 24px and fits. 16px at 1.6 gives 25.6px and does not — a difference of 1.6 pixels a line, which is a whole line of drift every fifteen lines. Dropping to a 4px grid raises the count from 3 to 5 of 36, which helps and does not rescue it.
Unitless and em line-heights are different properties
line-height: 1.5 inherits the factor, and each child recomputes from its
own font size. line-height: 1.5em computes to pixels at the parent and inherits
that fixed number. They agree exactly when the child matches the parent and diverge
everywhere else.
| Parent | Child | line-height: 1.5 | line-height: 1.5em |
|---|---|---|---|
| 16px | 16px | 24px | 24px |
| 16px | 12px | 18px | 24px |
| 16px | 24px | 36px | 24px |
| 16px | 32px | 48px | 24px |
| 20px | 14px | 21px | 30px |
The em version hands every descendant the parent's line box regardless of their own size, so a 32px child inside a 16px parent gets a 24px line box — a line box smaller than the type in it. That is the failure mode the unitless form exists to prevent, and it is why the unitless value is the default advice.
How to use
- Set the font size and the column width.
- The verdict says whether the measure is comfortable.
- Adjust the line height and watch the baseline grid.
- The sample text is drawn over the grid you chose.
Frequently asked questions
How wide should a column of text be?
Whatever holds 45 to 75 characters at your font size, which pins the width much harder than it sounds. At 16px with a half-em average character advance that means between 360px and 600px, and nothing outside it. Fix the size and the width stops being a free choice.
My column is too wide. Should I narrow it?
You can, but raising the font size fixes it too and is often the better answer. A 700px column holds 100 characters at 14px, which is far too many, and 70 at 20px, which is comfortable. The instinct is to narrow the column, and the arithmetic says the type was simply too small for it.
Why does my text drift off the baseline grid?
Because font size times line height has to be an exact multiple of the grid, and almost nothing is. Across six common font sizes and six common line heights, only three of the 36 combinations land on an 8px grid. 16px at 1.5 gives exactly 24px and fits; 16px at 1.6 gives 25.6px and does not.
Would a 4px grid be easier?
Somewhat, and not as much as you would hope. Halving the grid roughly doubles the number of workable combinations but still rejects most of them, because the constraint is exact divisibility rather than closeness. A miss of 1.6 pixels a line is a whole line of drift every fifteen lines.
Should line-height have a unit?
No, and the reason is inheritance. A unitless value passes the factor down, so each child recomputes from its own font size. An em value computes to pixels at the parent and passes that fixed number down, so every descendant keeps the parent’s line box whatever size they are.
What goes wrong with an em line-height?
A child larger than its parent ends up in a line box smaller than its own type. A 32px child inside a 16px parent with line-height 1.5em gets a 24px line box, so the lines overlap. The unitless form gives that same child 48px, which is what you meant.
How exact is the character count?
It assumes an average advance of half an em, the usual working figure for prose in a humanist sans. Real values move with the typeface and with the text, so every width here inherits that approximation. Treat the numbers as a band rather than a boundary.
Does this send anything anywhere?
No. Everything is computed in your browser, and nothing is uploaded.
🔒 This tool runs entirely in your browser. Nothing you enter is uploaded, logged, or stored.