Set the rhythm of a paragraph.
Pick a font size and a reading context, then tune line height and letter spacing with a live preview.
Line-height and tracking are calculated in the browser. Nothing is uploaded.
What it does
About the Line Height / Letter Spacing Calculator.
A line-height and letter-spacing calculator maps a font size to leading and tracking values you can preview and copy into CSS.
Body copy usually wants more line-height than a hero headline. Display type often wants tighter tracking. This tool gives you both numbers with a live paragraph so you are not guessing in Figma and again in code.
How to use
Three steps.
Set
Enter the font size and pick a reading context (body, UI, display).
Read
Adjust line-height and letter-spacing while watching the preview.
Copy
Copy the CSS properties when the rhythm feels right.
When to use it
Where it helps.
Use it for long-form help docs, settings pages, and marketing blocks where a 1.2 line-height will crush paragraphs or a 1.8 will look loose. Recheck after you change the typeface, not only the size.
FAQ
FAQ.
What line-height should body text use?
Many product UIs land between 1.4 and 1.6 for body sizes around 16px. Headlines often sit closer to 1.1 to 1.25. Measure with your actual font, because x-height changes the feel.
Is letter-spacing the same as kerning?
No. Kerning is pair-specific spacing inside the font. Letter-spacing (tracking) adds or removes space across a whole string. This calculator outputs tracking, not kerning tables.
How do I copy the CSS?
Copy the line-height and letter-spacing declarations from the tool and paste them onto the selector or token that owns that text style.
Does anything leave my browser?
No. The preview and the math run locally.