Line Height Calculator (Typography)
Work out CSS line-height from font size, with a simple ratio or the golden-ratio method for your line width, plus characters per line and a baseline grid.
Unitless line-height (1.5, not 24px) is usually best in CSS: it scales with the font size of every element that inherits it.
| Font size (px) | Line height at 1.5× | Golden-ratio line height (px) | Golden ratio, unitless | Golden-ratio width (px) |
|---|---|---|---|---|
| 12 | 18 | 22 | 1.834 | 377 |
| 14 | 21 | 23.72 | 1.694 | 513 |
| 16 | 24 | 25.67 | 1.604 | 670 |
| 18 | 27 | 27.76 | 1.542 | 848 |
| 20 | 30 | 29.96 | 1.498 | 1,047 |
| 24 | 36 | 34.56 | 1.44 | 1,508 |
| 32 | 48 | 44.25 | 1.383 | 2,681 |
| 48 | 72 | 64.41 | 1.342 | 6,032 |
Line height (leading) is the vertical distance from one line of text to the next. Too tight and lines blur together; too loose and paragraphs fall apart. This calculator works out a CSS line-height from your font size, either with a simple ratio (1.5 is a safe default for body text) or with the golden-ratio method that also takes the width of the text column into account. It shows the value as a unitless CSS number, in px, pt and rem, counts characters per line and can round to a baseline grid.
How to use this tool
- Enter the font size and its unit (px, pt or rem).
- Choose a ratio, or the golden-ratio method for a line height adjusted to the column width.
- Enter the line length in px or characters.
- Copy the CSS; check the characters-per-line verdict and the table of other sizes.
Formula
Ratio: h = f × r. Golden ratio: h = f × (φ − (1 ÷ 2φ) × (1 − w ÷ (f × φ)²)), φ ≈ 1.618
f is the font size in px, r the ratio, w the line length in px and h the line height. The golden-ratio formula comes from Chris Pearson’s Golden Ratio Typography: at the width (f × φ)² it gives exactly f × φ, and narrower columns get slightly tighter lines. Characters per line = w ÷ (average character width × f). 1 pt = 4/3 px, and rem values use the root font size.
Example
For 16 px text at the default ratio of 1.5, the line height is 24 px (8 px of leading), written in CSS as line-height: 1.5. In a 640 px column that is about 80 characters per line, a little long. With the golden-ratio method, 16 px text in a 550 px column gets 25.0 px, while (16 × φ)² = 670 px is the width where it reaches 25.9 px.
Frequently asked questions
What is a good line height for body text?
Between 1.4 and 1.6 times the font size for most fonts and widths, and 1.5 is a common default. WCAG 2.2 (success criterion 1.4.8, level AAA) asks for at least 1.5 within paragraphs.
Should I use a unitless line-height in CSS?
Yes, in most cases. A unitless value such as 1.5 is multiplied by each element’s own font size, while 24px stays 24px even for a 40px heading.
How many characters should a line have?
Typography guides commonly cite 45 to 75 characters for comfortable reading, with about 66 as a classic target. WCAG 1.4.8 asks that lines can be no wider than 80 characters.
Sources
Last updated:
Page address with these inputs: https://kakao.mobile/tools/line-height-calculator/
Cite or embed this tool
kakaoCalc. (2026, November 8). Line Height Calculator (Typography). https://kakao.mobile/tools/line-height-calculator/
“Line Height Calculator (Typography).” kakaoCalc, 8 Nov. 2026, kakao.mobile/tools/line-height-calculator/.
Paste this code into your page. The widget runs in your visitors' browsers, shows no ads and keeps a link back to this page. Embedding terms