Line-height Calculator
Convert design line spacing (px) to line-height multiplier.
▶About this tool
This tool converts design leading (px) to line-height multiplier in one click. Three features: 1) Enter font size (px) and desired line spacing (px) for multiplier, 2) Convert design specs to CSS, 3) Useful for typography line spacing design.
Tool interface
line-height (multiplier) —
CSS —
Usage
- Enter font size (px) and desired line spacing (px)
- line-height multiplier is calculated instantly
- Use result for CSS line-height property
When to use
Converting design specs to CSS, typography line spacing.
Examples
16px font, 24px spacing → line-height: 1.5
FAQ
What does unitless line-height mean?
Multiplier of font size. 1.5 = 1.5× font height. Inherits relatively.
Line spacing vs line-height?
Same concept. Design uses 'leading', CSS uses line-height. spacing ÷ font-size = multiplier.
Recommended line-height?
Body 1.5–1.8. Headings 1.2–1.4. This tool converts design leading (px) to multiplier.
How to calculate line-height from px?
Desired line height (px) ÷ font size (px) = multiplier. E.g. 24px ÷ 16px = 1.5.
What is line-height: normal?
Browser default (~1.2). Varies by font. Better to set explicitly.
Typography line spacing tips?
Body 1.5–1.8 for readability. Headings 1.2–1.4. This tool converts px leading to multiplier.
What is design leading?
Line-to-line spacing. In Figma/Illustrator as 'leading'. Convert px to line-height multiplier.
Inherit line-height?
Unitless (1.5) inherits relatively. px is fixed. Prefer unitless for scaling.
Align multi-line text spacing?
Use same line-height multiplier. Consistent visual spacing across font sizes.
How to use line-height calculator?
Enter font size (px) and desired line spacing (px). Get line-height multiplier instantly.
Related tools
Typography Set