What is a good line-height for body text?

1.5–1.7 unitless for 16px body copy is a common readable range. Headings often use 1.1–1.3.

Unitless vs px line-height — which should I use?

Prefer unitless (e.g. 1.5) so line-height scales when font-size changes. Fixed px is OK for single-size components.

What is Tailwind leading-6 in pixels?

leading-6 = 1.5rem line-height. At 16px root that's 24px — but only if font-size is also 1rem. Always derive ratio from design specs.

Tailwind leading-* vs Design Specs —

Design handoff says “24px line height on 16px type.” Dev writes leading-6 from muscle memory. PM says body copy feels cramped on mobile. Nobody agrees whether the spec meant unitless 1.5, fixed 24px, or Figma’s “Auto” line height that changes when you resize the frame.

leading-6 without checking font-size — Tailwind leading utilities set line-height, not a magic “24px gap.” If text is text-sm, the computed result differs from text-base.
Px line-height on responsive type — line-height: 24px on font-size: 14px mobile and 18px desktop breaks the ratio on one breakpoint.
Same ratio for headings and body — Display headings at 1.5 feel airy; body at 1.1 feels crushed.
Copying Figma “Auto” as a number — Auto is content-dependent. Export the computed px values or use unitless ratios in code.

The one formula you need

unitless line-height = lineHeightPx ÷ fontSizePx

Design spec	Calculation	CSS
16px / 24px	24 ÷ 16 = 1.5	`line-height: 1.5`
14px / 21px	21 ÷ 14 = 1.5	`line-height: 1.5`
32px / 38px	38 ÷ 32 ≈ 1.19	`line-height: 1.19`

Unitless values multiply with font-size — when the user zooms or you change text-lg → text-xl, line spacing scales proportionally. That’s why WCAG-friendly typography prefers unitless for body text.

Typical ranges (starting points, not laws)

Element	Font size	Unitless range
Body copy	14–18px	1.5 – 1.7
UI labels / buttons	12–14px	1.3 – 1.4
H1–H3	24–48px	1.1 – 1.25
Long-form prose	16–18px	1.6 – 1.75

Golden ratio (1.618) posts get engagement on r/webdesign; in production, readability beats φ. Test with real copy — lorem ipsum hides rag and descender collisions.

Tailwind mapping pitfalls

Tailwind leading-* uses rem-based line-heights, not unitless ratios:

Class	line-height value
leading-5	1.25rem (20px @ 16px root)
leading-6	1.5rem (24px)
leading-7	1.75rem (28px)
leading-relaxed	1.625
leading-normal	1.5

If design says “16px font, 26px line” → ratio 1.625 → leading-relaxed on text-base might match — verify computed styles in DevTools, not class names.

For arbitrary precision:

<p class="text-base leading-[1.625]">...</p>

Document arbitrary values in your design token table so the next dev doesn’t “simplify” to leading-6.

Figma → CSS workflow

Select text layer → note font size and line height (switch Auto to Fixed if needed for export).
Divide line height by font size → unitless ratio.
Plug into line-height calculator to cross-check px ↔ ratio.
Add to tokens / Tailwind config — one source of truth.
Review on 320px wide viewport — cramped copy often only shows on mobile.

Accessibility note

Users who increase browser default font size rely on unitless line-height scaling. Fixed px line-heights can cause overlapping lines when text scales — a common audit finding that’s invisible on the designer’s 27” monitor.

Tool: px ↔ unitless

The line-height tool converts font size + desired spacing to unitless ratio and computed px — in your browser, no upload.

→ Try the line-height tool

TL;DR

Divide design line height by font size → unitless ratio. Don’t guess Tailwind class names. Verify in DevTools on mobile width. Document tokens so handoffs stop breaking every sprint.

Tools