Line Height and Vertical Rhythm Calculator
Calculate line heights that land on a baseline grid, check them against readability guidance for the measure, and generate the spacing scale that keeps every element on the same rhythm.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Line height depends on the line length
The single number most often copied without thought is 1.5. It is a reasonable default for body text at a typical measure and it is wrong at the extremes. Long lines need more leading, because the eye has further to travel back to find the start of the next line and a tight setting makes it land on the wrong one. Short lines need less, since the return journey is short and generous leading makes the block fall apart into separate strips. Large display type needs considerably less than body text, often below 1.2.
The baseline grid keeps everything aligned
Choosing a base unit, commonly 4 or 8 pixels, and making every line height and every margin a multiple of it means text in adjacent columns lines up, and vertical spacing looks deliberate rather than arbitrary. The constraint is what produces the result: without it, spacing values accumulate as one-off decisions and nothing quite aligns for reasons nobody can identify.
Rounding to the grid changes the ratio
A 17 pixel font at a 1.5 ratio wants 25.5 pixels of line height, which is not a multiple of 4 or 8. Snapping it to 24 or 28 changes the effective ratio to 1.41 or 1.65, and one of those may be outside what the measure needs. This is the real work in setting up a rhythm: choosing font sizes whose grid-snapped line heights land at ratios you actually want, rather than accepting whatever the rounding produces.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Is 1.5 the right line height?
It is a reasonable default for body text at a typical measure and wrong at the extremes. Long lines need more, short lines need less, and large display type usually needs below 1.2.
What is a baseline grid?
A vertical unit, commonly 4 or 8 pixels, that every line height and margin is a multiple of. It makes text in adjacent columns align and spacing look deliberate rather than accumulated from one-off decisions.
What is the measure?
The line length, usually counted in characters. Between 45 and 75 characters is the long-standing guidance for body text, with about 66 often cited as the comfortable target.
Should line height be unitless?
Yes. A unitless value multiplies the element font size, so a child with different type gets a proportional line height. A value in pixels or rem is inherited as a fixed length, which gives cramped or loose lines wherever the size differs.
Why does my text not sit on the grid?
Usually because the line height rounded to a value that is not a multiple of the base unit, or because a margin was set in a unit that does not divide into it. Every vertical value has to be a multiple, not just the line heights.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Enter your font sizes and baseline unit to get line heights that stay on the grid.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.