Why does CSS line-height accept both a ratio and a pixel value?

A unitless ratio (e.g. 1.5) scales with the element's own font size, which is usually what you want; a fixed pixel value stays constant even if the font size changes elsewhere.

What is a typical line-height ratio for body text?

Something in the 1.4 to 1.6 range is a common readable default for paragraph text.

Line Height Calculator

Convert a CSS line-height between a unitless ratio and a pixel value.

Font size (px)

Ratio Pixels

Line-height ratio

Ratio 1.500

Pixels 24.0px

Related tools

CSS Unit Converter (px, rem, em)
Modular Scale Calculator
Fancy Text Generator
Zalgo Text Remover

How it works

1
Enter a font size

In pixels.
2
Enter a line-height ratio or pixel value

Pick whichever you have.
3
See the equivalent in the other unit

Both forms are shown together.

FAQ

Why does CSS line-height accept both a ratio and a pixel value?: A unitless ratio (e.g. 1.5) scales with the element's own font size, which is usually what you want; a fixed pixel value stays constant even if the font size changes elsewhere.
What is a typical line-height ratio for body text?: Something in the 1.4 to 1.6 range is a common readable default for paragraph text.