Line Height Calculator
Small text needs more leading. Big text needs less. Pick a size, get a starting line-height, and preview it live.
Runs entirely in your browser — no upload, no registration.
Great typography rewards attention. Set your line-height too tight and readers stumble between lines; too loose and the paragraph loses cohesion. A comfortable line-height varies with font size, weight, and the width of the line — this preview updates all three together so you can feel the effect before you paste it into production CSS.
CSS
font-size: 16px;
line-height: 1.55;
max-width: 65ch;What this tool does
Suggests a line-height ratio based on your font size and content width, and gives you the CSS to paste.
Why you might need it
Line-height is the biggest single lever for readability. Body copy at 1.15 is exhausting; headings at 1.7 float apart.
How to use it
- Set your font size.
- Adjust ratio and measure.
- Preview the paragraph.
- Copy the CSS.
Always review the included licence before commercial use. Do not remove copyright records, designer names, licensing metadata or embedding restrictions from any font you process.