Line Height Calculator
Convert CSS line-height between px, unitless, %, and rem — instantly. See a live text preview and readability guidance for your font size.
px
24.00px
unitless
1.5000
%
150.00%
rem
1.5000rem
Live Preview
The quick brown fox jumps over the lazy dog. Good typography makes reading effortless.
font-size: 16px · line-height: 24.00px (1.500 unitless)
Recommended values for 16px font
Why use unitless line-height?
Unitless values (e.g. 1.5) scale relative to the element's own font-size. If a child element has a different font-size, its line-height adjusts automatically. px and % values are fixed and don't inherit this way — they can cause tight text in nested elements.
What is the ideal line-height?
WCAG 2.1 Success Criterion 1.4.12 recommends line-height of at least 1.5× the font size for body text. Most typographers suggest 1.4–1.6 for paragraphs. Larger text (headings) can use tighter values around 1.1–1.3 because each line is fewer characters wide.
line-height vs leading
In print typography, 'leading' is the space added between lines. In CSS, line-height is the total height of a line box, which includes the text itself. So for 16px text with line-height 24px, the 'extra space' (leading) split above and below the text is (24 - 16) / 2 = 4px on each side.
Frequently Asked Questions
What is the ideal line-height for body text?↓
WCAG 2.1 Success Criterion 1.4.12 recommends a line-height of at least 1.5 times the font size for body text. Most typographers suggest a unitless value between 1.4 and 1.6 for paragraph text at typical body sizes (16–18px). Larger font sizes can use slightly tighter values, while smaller text may need a looser line-height for readability.
How do I convert line-height from px to unitless?↓
Divide the line-height in px by the font size in px. For example, if font-size is 16px and line-height is 24px, the unitless value is 24 ÷ 16 = 1.5. You can use the NJHTools Line Height Calculator at www.njhouse.kr/tools/line-height — enter the px value, select px as the unit, and the unitless conversion appears instantly.
Why should I use unitless line-height instead of px?↓
Unitless line-height values (e.g. line-height: 1.5) scale relative to the element's own computed font-size. If a child element inherits the line-height but has a different font-size, its line-height adjusts automatically. With px or % values, the computed px line-height is inherited as-is, which can cause too-tight or too-loose spacing in nested text elements.
How do I convert line-height from % to px?↓
Multiply the percentage by the font size divided by 100. For example, 150% of a 16px font is 150 × 16 ÷ 100 = 24px. The NJHTools Line Height Calculator does this automatically — enter the % value, select %, and all conversions update instantly.
What is the difference between line-height and leading?↓
In print typography, 'leading' refers to the space added between lines of type (from the strips of lead placed between lines of metal type). In CSS, line-height is the total height of a line box including the text itself. The extra space above and below the text (called 'half-leading') is (line-height − font-size) ÷ 2. So for 16px text with line-height 24px, 4px of space appears above and 4px below each line.
Last updated: