Skip to main content

Line Height Calculator

Work out line height and leading from a font size and a ratio, with the CSS to copy.

Type

Ratio
Between 0.8 and 3. Body text reads well at 1.4 to 1.6.

Sample paragraph

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. Sphinx of black quartz, judge my vow.

Result

Line height, px
24
Leading, px
8

Code

  • CSSline-height: 1.5;
  • CSS pxline-height: 24px;
  • SwiftUI.lineSpacing(8)

Common sizes

FontLine heightLeading
15px5px
16.5px5.5px
18px6px
19.5px6.5px
21px7px
24px8px
27px9px
30px10px
36px12px
42px14px
48px16px
54px18px
60px20px
72px24px
84px28px
96px32px
108px36px

Runs in your browser; nothing you enter leaves this page.

How it works

Size times ratio

Line height is the font size multiplied by a ratio. Leading, the space added between lines, is what the line height adds on top of the font size.

The presets are Tight (1.2), Normal (1.5), Relaxed (1.75) and Loose (2). Type any ratio from 0.8 to 3 and the matching preset lights up, or Custom when none matches.

line height = size × ratio; leading = line height − size

What to copy

CSS gets the unitless ratio, which children inherit as a ratio and so scales with their own font size. The pixel version is there when you need a fixed value, and SwiftUI's lineSpacing takes the leading.

The sample paragraph

The paragraph is set at your size and line height, with every line box ruled, so you can judge the spacing before you ship it.

More tools

All 238 tools