TypographyApril 2026 · 5 min read

How to Calculate Line Height for Web Typography

Line height (leading) is the vertical space between lines of text. Too tight and text feels cramped and hard to read. Too loose and lines disconnect from each other. The right line height depends on font size, line length, and font characteristics — and there's a reliable formula to find it.

📏

Try the Line Height Calculator

Free, no signup

→

Derek Giordano

Designer & Developer

In this guide

01The Line Height Formula02Headings vs Body Text03Use Unitless Line-Height04Font-Specific Considerations

⚡ Key Takeaways

Set the perfect line-height for readable web text.
The Line Height Formula.
Covers headings vs body text.
Covers use unitless line-height.
Covers font-specific considerations.

The Line Height Formula

For body text, use a line-height between 1.4 and 1.8 times the font size. The optimal value depends on line length: shorter lines (40-50 characters) need tighter line height (1.4-1.5). Longer lines (70-80 characters) need looser line height (1.6-1.8). For a 16px body font at 65 characters per line, 1.6 (25.6px) is a good starting point.

Headings vs Body Text

Headings need tighter line height than body text because they're larger and typically shorter (1-3 lines). Use 1.1-1.3 for headings. Body text uses 1.4-1.8. Subheadings and UI labels use 1.2-1.4. The Line Height Calculator generates values for each text role based on your font size and reading context.

💡 Tip

Use 3+ color stops instead of 2 to avoid the muddy gray band that appears in the center of complementary-color gradients.

Use Unitless Line-Height

Always use unitless line-height values: line-height: 1.5 (not line-height: 24px or line-height: 1.5em). Unitless values scale with the element's font size — if a child element changes font size, the line height adjusts proportionally. Fixed values (px, em) inherit the computed value, which breaks when font sizes change.

⚠ Warning

CSS gradients used as backgrounds cannot be animated with standard transitions. Use background-size animation or @property registered custom properties instead.

Font-Specific Considerations

Fonts with tall x-heights (the height of lowercase letters) need more line height because the text feels denser. Fonts with large ascenders/descenders (letters like b, d, g, p) may need extra line height to prevent overlap. Always test line height visually with your actual font — two fonts at the same size can feel very different.

Frequently Asked Questions

What is the ideal line height for body text?+

1.5-1.6 for most body text at 16px. Increase to 1.6-1.8 for longer line lengths (70+ characters per line). Decrease to 1.4-1.5 for shorter line lengths or larger font sizes.

Should I use px or unitless values for line-height?+

Always use unitless values (line-height: 1.5). They scale proportionally with font size. Fixed values (px, em) cause inheritance issues when child elements have different font sizes.

What line height should headings use?+

1.1-1.3 for headings. Larger text needs tighter line height because the vertical space between lines becomes visually larger at bigger font sizes.

Try it yourself

Use the Line Height Calculator — free, no signup required.

⚡ Open Line Height Calculator

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

📚 References & Further Reading