Skip to content
Utility Calculators

CSS Line Height Calculator

Verified formula Updated Jun 2026 Private — runs on your device

Enter details
px
Verified formula Private

Line height

24.00

For general information only — not financial, tax, legal or medical advice. Verify before you rely on it.

How to use the CSS Line Height Calculator

The CSS Line Height Calculator works out your line height in an instant. Enter font size and line height ratio and the result updates as you type — it is free, needs no sign-up, and runs entirely in your browser so your figures stay private.

  1. Enter the font size.
  2. Enter the line height ratio.
  3. Read off your line height — the calculator updates automatically, with no button to press.

Formula

The CSS Line Height Calculator uses the formula:

Line height = Font size × Line height ratio

Worked example

For example, with font size of 16 px and line height ratio of 1.5, the line height is 24.00.

Inputs used
Font size 16 px
Line height ratio 1.5
Results
Line height 24.00

Results are estimates for educational use, not professional advice.

Key terms explained

Ratio
A comparison of two quantities showing how many times one contains the other.

Frequently asked questions

Multiply font size by the line-height ratio. A 16 px font at 1.5 gives a 24 px line height.

For body text, a ratio of about 1.4 to 1.6 is comfortable to read.

Yes. A unitless line-height scales with each element's font size, which is usually the safest choice.

Yes. Line height is the total line box, so the extra space is the line height minus the font size.

Enter the font size. Enter the line height ratio. Read off your line height — the calculator updates automatically, with no button to press.

Related calculators