Find the optimal line height for your text – based on font size & line length
Want to embed this line height calculator on your website? Use this code:
How line height affects readability and how to choose the right value.
Read Tutorial →The relationship between measure and leading in typography.
Read Tutorial →Why unitless is recommended and how it simplifies responsive design.
Read Tutorial →| Feature | Our Tool | Tool A | Tool B |
|---|---|---|---|
| Free & unlimited | ✅ | ✅ | ❌ (limit) |
| Live preview | ✅ | ✅ | ✅ |
| Recommendation based on line length | ✅ | ❌ | ✅ |
| Font family selection | ✅ | ✅ | ❌ |
| Color pickers (text & background) | ✅ | ✅ | ✅ |
| Custom sample text | ✅ | ❌ | ✅ |
| Download CSS file | ✅ | ❌ | ✅ |
| Client-side / private | ✅ | ❌ | ✅ |
Line height (leading) is the vertical space between lines of text. It is usually set as a unitless multiplier of the font size (e.g., 1.5 means 1.5 × font size).
We use a simple formula: recommended line height = 1.2 + (line length - 30) * 0.005, clamped between 1.3 and 1.8. This provides a solid starting point based on typographic best practices.
Unitless line height is recommended because it scales proportionally with font size, especially in responsive designs. The generated CSS uses unitless.
For optimal readability, aim for 50–75 characters per line. Our calculator lets you experiment with any length.
Proper line height improves readability, creates visual rhythm, and makes text more inviting. Too tight and lines feel cramped; too loose and the text loses cohesion. The ideal line height depends on font size, line length, and typeface.
Shorter lines (30‑50 chars) can use tighter line heights (1.3–1.4).
Longer lines (60‑80 chars) need more leading (1.5–1.7).
Fonts with large x‑height may require slightly more line height.
Tools to master web typography