Use this line height calculator to convert between unitless line-height and pixel line-height for better typography and readability.
Live Preview
Typography is easier to read when line-height is balanced with font size. Good spacing reduces eye strain and improves comprehension across desktop and mobile screens.
What Is Line Height?
Line height is the vertical space between lines of text. In CSS, this is controlled with the line-height property.
It directly affects readability, visual rhythm, and how dense or airy your text feels.
For long-form reading, line height is one of the most important typography settings you can tune. Too tight, and paragraphs feel cramped. Too loose, and text becomes disconnected and harder to scan.
How the Line Height Calculator Works
The calculator uses two simple relationships:
- Pixel line-height = font size × unitless line-height
- Unitless line-height = pixel line-height ÷ font size
Example: if your font size is 16px and your line-height is 1.5, the computed line box is 24px. This is a common combination for comfortable body text.
Recommended Line Height Ranges
Body text (paragraphs)
- Usually 1.4 to 1.8 line-height
- Common baseline: 1.5 for 16px fonts
Headings
- Typically tighter than body text
- Often 1.1 to 1.3 depending on font and size
Captions, labels, and UI text
- Can be compact, but avoid extreme tightness
- Often 1.2 to 1.4
Why Unitless Line Height Is Usually Better
Setting line-height as a unitless number (like 1.5) is usually the safest option.
It scales naturally with font size and helps maintain consistent readability when elements inherit styles.
Pixel line heights can be useful in strict design systems, but they may break more easily when users zoom text or when responsive typography changes across breakpoints.
Accessibility and Readability Tips
- For paragraph text, start around 1.5 and adjust by testing.
- Use wider line-height for smaller fonts and dense content.
- Pair line height with sensible line length (about 45–90 characters).
- Check readability at mobile widths, not just desktop.
- Validate contrast and spacing for users with dyslexia or low vision.
Common Mistakes
- Using a single fixed pixel value for all text sizes.
- Very tight line-height on long paragraphs (fatiguing for readers).
- Overly loose line-height that makes paragraph flow difficult.
- Ignoring preview/testing on real devices and real content lengths.
Quick Workflow for Better Typography
- Pick a base body size (for example, 16px).
- Start line-height at 1.5 and review a full paragraph.
- Adjust in 0.05 increments until reading feels natural.
- Set heading line-height separately, usually tighter.
- Test responsiveness and accessibility before finalizing.
Final Thoughts
Great typography is subtle, but powerful. A good line-height setting improves comprehension, visual polish, and time-on-page. Use the calculator above to quickly convert values and build a more readable interface or article layout.