Line Height From Ratio
Calculator
Results
- Line height (px)
- 24
- Leading (px)
- 8
- Half-leading each side (px)
- 4
- Lines per 1000 px of height
- 41.666666
Design and print results
| Line height (px) | 24 |
| Leading (px) | 8 |
| Half-leading each side (px) | 4 |
| Lines per 1000 px of height | 41.666666 |
formula-map diagram
- Line height (px)
- 24
- Leading (px)
- 8
- Half-leading each side (px)
- 4
- Lines per 1000 px of height
- 41.666666
Formula breakdown
Formula
line-height = font size × ratio= 24
Note
Simplified model: these are standard prepress and typographic relationships computed on nominal values. Real press bulk, paper caliper and shrinkage, ink limits for a given profile, font metrics and binding allowances vary by supplier and by job, so confirm with your printer and a proof before going to press.
More in Design and printing
See all →Frequently asked questions
How is line height computed from font size and ratio?+
Line height equals the font size multiplied by the chosen ratio. A 16px font with a 1.5 ratio produces a 24px line height, meaning 8px of extra space is distributed above and below each line of text.
What line-height ratio should I use for body text?+
1.4 to 1.6 is the standard comfortable range for paragraph text, giving enough vertical breathing room for easy reading without lines feeling disconnected from each other. Long-form reading often favors the higher end of that range.
Why do headings usually use a tighter line-height ratio than body text?+
Large text has proportionally more built-in vertical space already, so a loose ratio (like 1.5) applied to a 48px heading creates awkward, overly airy gaps between lines. Headings commonly use 1.1-1.3 to keep multi-line titles visually cohesive.
Is line height in CSS the same as the ratio I calculate here?+
It can be — CSS's unitless line-height property is exactly this ratio, so a computed ratio of 1.5 can be written directly as `line-height: 1.5` and will scale automatically with the font size, which is generally preferred over hardcoding a pixel value.
My text looks cramped even with a 1.5 ratio — what else affects readability?+
Line length (characters per line) and letter-spacing also strongly affect perceived density. A 1.5 line-height can still feel cramped if lines are very long, since the eye has to track further with less vertical separation relative to that horizontal distance.