Online Tool Store
· 4 min read
How to Pick the Right Line Height for Your Font Size
Heshan Fernando
Co-founder & COO
Body text that reads cramped, or a heading with distractingly loose spacing between lines — both trace back to the same overlooked CSS property: line height, sometimes called leading. It’s one of those typography details that’s easy to leave at a browser default and only notice once a page feels subtly wrong to read, without immediately identifying why.
Getting it right isn’t about one universal number — the ideal line height ratio shifts with font size and with what kind of content you’re setting, and guessing at a value rather than reasoning from those factors is how inconsistent, uncomfortable-to-read type happens.
What line height actually controls
Line height sets the vertical space between lines of text, typically expressed as a unitless ratio relative to the font size (a ratio of 1.5 means 1.5 times the font size). Larger font sizes generally need a tighter ratio, while smaller body text benefits from a looser one — this is because the eye needs proportionally less extra space to distinguish lines as text gets bigger, while smaller, denser text needs more breathing room to stay comfortably readable.
Content type matters too: long-form body text generally wants looser line height for comfortable extended reading, while headings and short UI labels often look better tighter, since excess spacing on large, short text can look disconnected rather than legible.
Why people get stuck here
- There’s no single universal line-height number. The right ratio depends on font size and content type together, not a fixed value you can apply uniformly across a whole page.
- Cramped and overly loose spacing both hurt readability. Too tight, lines blur together for the eye; too loose, related lines feel disconnected — both are real, opposite failure modes.
- Headings and body text often need genuinely different treatment. Applying the same line-height ratio to both a large heading and long-form body copy usually produces a result that’s wrong for one of the two.
- Manually reasoning about the right ratio for a given font size takes actual typographic knowledge. Without a reference point, it’s easy to just guess and eyeball it, which produces inconsistent results across a project.
What a good line-height calculator looks like
Recommends a ratio based on font size and content type together
Since the right value depends on both factors, a calculator that only asks for font size alone misses half of what actually determines the ideal ratio.
Shows a live preview of the recommended value
Seeing the actual rendered spacing, not just a number, lets you judge whether the recommendation genuinely looks right for your specific content before committing to it.
Outputs a ready-to-use CSS snippet
Getting the exact CSS property and value to copy directly into your stylesheet removes a manual translation step from recommendation to implementation.
Common mistakes to avoid
- Applying one line-height value uniformly across headings and body text, when the two often need meaningfully different ratios.
- Setting line height in fixed pixel units instead of a unitless ratio, which breaks the proportional relationship to font size if that size changes later.
- Leaving line height at a browser default without considering whether it actually suits your specific font and content type.
- Setting line height too tight for long-form body text, making extended reading uncomfortable even if it looks fine for a quick glance.
- Setting line height too loose for large headings, making short text look disconnected rather than crisp.
How to do it with Line Height Calculator
Online Tool Store’s Line Height Calculator gets a recommended line-height ratio and CSS snippet from a font size and content type, with a live preview, entirely in your browser.
- Enter your font size.
- Choose the content type (body text, heading, or similar).
- Review the recommended ratio in the live preview.
- Copy the CSS snippet into your stylesheet.
Because the recommendation factors in both font size and content type with a live preview, you can judge the actual rendered result before committing it to your CSS.
Frequently asked questions
Should I use a unitless ratio or a fixed pixel value for line height?
A unitless ratio is generally recommended, since it scales proportionally if the font size changes later, keeping the relationship intact without needing to manually recalculate a fixed pixel value.
Why does my heading look wrong with the same line height as my body text?
Large headings and long-form body text typically need different ratios — tighter for large headings, looser for smaller body text — because the eye needs proportionally different spacing to read each comfortably.
Is there one line-height value that works for every project?
No — the ideal ratio depends on the specific font size and content type, so what works well for one design’s body text may look wrong applied uniformly to a different design’s headings or a different font size.
Final thought
Line height is a small setting with an outsized effect on how comfortable text actually is to read. Base it on your specific font size and content type rather than a guessed universal number, and check it against a real preview before shipping it.