Line Height Calculator
Turn a font size and preferred ratio into pixels, rem and a unitless line height.
Work out a line height
Line height in px: —
Line height in rem: —
Unitless line height: —
Typography needs room to breathe. This paragraph is rendered at the exact size and line
height shown above, so you can judge the spacing before you commit.
How to use the Line Height Calculator
- Enter the font size you are using and the ratio you prefer.
- Read the line height in pixels, rem and unitless form.
- Copy the generated CSS into your own stylesheet.
Features
- Font size, preferred ratio and root size controls
- Results in pixels, rem and unitless form
- Live preview paragraph at the chosen size
- Copyable CSS rule with the recommended line height
Advertisement
Frequently Asked Questions
Common questions about the free online line height calculator.
It is the vertical distance between the baselines of two lines of text, and it controls how
airy a paragraph feels.
It is a plain number such as 1.5 that is multiplied by the element's own font size, so
children inherit the ratio.
A unitless value scales with each font size, while a fixed pixel value stays the same and can
look cramped in larger text.
Between 1.4 and 1.7 works well for body text, while headings often sit tighter at around 1.1
to 1.3.
Multiply the font size by the ratio. An 18 pixel font at 1.6 gives a line height of 28.8
pixels.
One rem equals the root font size, usually 16 pixels, so 28.8 pixels is 1.8rem with the
default root.
It is the practice of keeping line heights and spacing on a consistent scale so columns of
text line up neatly.
Yes. It is completely free, needs no account and calculates everything locally in your
browser.
Last updated: October 10, 2026