Free Online Reading Line Height Calculator
Find a comfortable line height based on font size and measure.
Live preview
Reading preview
A comfortable column is easier to follow
Line height is the vertical distance from one baseline to the next. When lines sit too close together, the eye jumps back to the wrong line at the end of a long measure. When they sit too far apart, the paragraph breaks into separate strips and the reader loses the thread. The sweet spot depends on font size, line length, and how much text the reader will take in at once.
This preview uses the recommended values. Change the font size or measure on the left and the column will update immediately, so you can compare the rhythm before applying it to your CSS.
Line height is best set as a unitless number such as 1.6, so it scales with the font
size instead of staying fixed in pixels. The preview applies the same rule.
About the Reading Line Height Calculator
Line height, also called leading, controls how much air sits between lines of text. It is one of the most consequential typography decisions and one of the easiest to get wrong, because a value that looks fine in a short headline can become exhausting in a long paragraph. This calculator combines font size, line length, and content type to suggest a unitless line height, the matching paragraph spacing, and a sensible maximum width for the text column. A live preview shows the recommendation with real body copy.
Why longer lines need more leading
When a line is short, the eye returns to the start of the next line with little horizontal travel and rarely loses its place. When a line is long, that return trip is longer and the risk of skipping or repeating a line increases. Extra leading gives the eye a clearer horizontal channel to follow back. This is why a 60-character measure can work at a line height of 1.5, while a 90-character measure usually feels cramped until it reaches roughly 1.65 or higher.
Font size and content type
Small text needs proportionally more leading because the gap between lines is physically smaller. Large display text needs proportionally less because the letters themselves already create separation. Headings often look best between 1.05 and 1.3, interface labels around 1.3 to 1.5, and continuous body copy between 1.5 and 1.8. The content-type preset starts from those ranges, then adjusts for your font size and measure. The vertical rhythm selector adds or removes a small amount of breathing room without leaving the comfortable range.
Paragraph spacing and measure
Paragraph spacing should be visibly larger than the gap between lines. A common starting point is about 0.75 to
1em of margin below each paragraph, which this tool converts from your font size into pixels. The maximum width
is expressed in ch units, where one ch is the width of the zero glyph in the current
font. Around 60 to 75 characters per line is the usual target for body text; long-form reading can stretch a
little further, while headings and captions should stay much narrower.
Frequently asked questions
Should I use unitless line-height or pixels?
Prefer a unitless value such as 1.6. It multiplies the element's own font size, so nested elements and user font-size changes scale correctly. A pixel value stays fixed and can look cramped if the text is enlarged.
Is 1.5 always the right line height?
No. It is a solid default for 16px body text at a moderate measure, but it is too tight for small text or very long lines and too loose for large headings. Use the recommendation for your specific combination, then test with real content.
Why does the preview look different from my website?
The preview uses a generic system font and a simplified paragraph style. Your site may use a different typeface with a larger or smaller x-height, different letter spacing, or extra margins. Treat the numbers as a starting point and verify in the browser.