Skip to content
Bai
EspañolEnglishEuskara Get started →

Tools

Line height calculator

Work out the recommended line height for your font size, in pixels and unitless for CSS.

Private by design
px
Recommended
24.0px
1.5× ratio — optimal for body text
Golden ratio
25.9px
φ (1.618) — harmonious proportions
Tight1.2×
Headings, large text
19.2px
Snug1.375×
Subheadings
22.0px
Normal1.5×
Body text (recommended)
24.0px
Relaxed1.625×
Long-form reading
26.0px
Loose2×
Large blocks, accessibility
32.0px
1.2× line-height

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

1.5× line-height

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

2× line-height

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

About this tool

The line height calculator gives you the line-height in pixels for a given font size. Use it to decide how much breathing room to leave between lines in an article, a product page, a heading or a button, and to see at a glance how tightening or loosening the leading changes readability.

Enter the font size in pixels. At the top you get two suggestions: “Recommended”, a 1.5 ratio for body text, and “Golden ratio”, at 1.618. “Common ratios” lists five scales from tight (1.2) to loose (2), each with its typical use and a button to copy the value. The “Preview” section sets a paragraph at 1.2, 1.5 and 2 so you can compare them.

Everything is calculated in your browser and nothing is sent anywhere. Results are shown in pixels to one decimal place; if you prefer a unitless line-height in your CSS, use the ratio itself (for example 1.5). The tool does not take column width or your specific typeface into account, so treat the numbers as starting points to check against your real type.

Frequently asked questions

What line height is recommended for body text?

Long paragraphs usually work well at 1.4 to 1.6 times the font size. The WCAG accessibility guidelines ask that text can be displayed at a line height of at least 1.5.

Should line-height have units or not?

In CSS a unitless value (line-height: 1.5) is usually better, because child elements recalculate it from their own font size. Pixels are useful when you need an exact height.

What line height should I use for headings?

Large headings usually look better with tighter leading, around 1.1 to 1.3, as a 1.5 ratio makes the lines look disconnected.

What is a golden ratio line height?

It means multiplying the font size by 1.618. It gives slightly more open text than 1.5, which some readers find comfortable for long reads, though it is not a rule.

Related tools