Online Tool Store
Line Height Calculator
Get a recommended line-height ratio and CSS snippet from a font size and content type, with a live preview. Runs entirely in your browser.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Ratio
1.5
Line height (px)
24px
CSS
line-height: 1.5;
The quick brown fox jumps over the lazy dog. Good line height makes long text comfortable to read without lines feeling cramped or too far apart.
How it works
- Enter your font size and choose the content type.
- A recommended line-height ratio, pixel value, and CSS snippet appear instantly.
- The sample paragraph below updates live so you can see the effect.
The formula
Line height (px) = font size × ratio
Body text uses 1.5, headings use 1.2, and captions use 1.4 as sensible defaults.
FAQ
Why do headings use a smaller ratio than body text?
Larger text needs relatively less vertical space between lines to still feel comfortable, and tighter leading helps a heading read as one visual unit rather than several loosely related lines.
Should I use a unitless ratio or a pixel value in CSS?
A unitless ratio (like line-height: 1.5) is usually preferred — it scales automatically with the element's own font size, including for nested elements, unlike a fixed pixel value.
Are these ratios a hard rule?
No — they're solid defaults based on common typography guidance. Adjust to taste for your specific font and design.
How we compare
| Feature | Online Tool Store | Guessing a value | Design system docs |
|---|---|---|---|
| Live preview of the effect | ✓ | ✗ | ✗ |
| Ready-to-copy CSS | ✓ | ✗ | ✓ |
Guessing a line-height value often means several trial-and-error edits. Line Height Calculator gets you a sensible starting point immediately.