Line Height Calculator: Find the Perfect Leading for Any Font Size

Line height is one of the most impactful — and most overlooked — typographic decisions you’ll make. Too tight and text feels claustrophobic. Too loose and your eye loses its place between lines. Getting it right makes the difference between copy that invites you in and copy you struggle to follow.

The Tooladex Line Height Calculator helps you find the right value for any font size and get it in the exact CSS unit you need — unitless ratio, px, em, or rem.

---

What is line height (and what is leading)?

Line height is the vertical distance from one baseline to the next — the total height allocated to each line of text. In print typography this same concept is called leading (pronounced “ledding”), named after the strips of lead that typesetters placed between rows of metal type.

In CSS the line-height property controls this directly. A value of 1.5 on a 16px font means each line occupies 24px of vertical space.

---

Unitless, px, em, or rem — which should you use?

CSS gives you several ways to express line height:

Format	Example	Notes
Unitless	1.5	Scales with the element’s own font size. Recommended.
Pixels	24px	Fixed — won’t adjust if font size changes.
Em	1.5em	Scales with the element’s font size (same as unitless in most cases).
Rem	1.5rem	Scales with the root font size, not the element’s.
Percent	150%	Behaves like em.

The unitless ratio is almost always the right choice for body text and headings. A fixed pixel value will break if a parent style or user preference changes the font size — the text could overlap. A unitless value inherits and scales gracefully.

---

WCAG 1.4.12: the accessibility floor

The Web Content Accessibility Guidelines (WCAG) Success Criterion 1.4.12 (Text Spacing, Level AA) requires that users must be able to set body text line height to at least 1.5× the font size without loss of content or functionality.

In practice, the simplest approach is to start at 1.5 or higher for body text, which means you comply by default and give your content the breathing room it needs.

---

Recommended line height by use case

Use case	Ratio range	Why
Display / hero headings	1.0–1.1	Very large type; tight leading looks intentional
H1–H2 headings	1.1–1.3	Still large; slight space improves multi-line headings
H3–H4 subheadings	1.2–1.4	Smaller headings need a bit more room
Body text	1.4–1.6	The WCAG-compliant sweet spot for paragraph text
Small / caption text	1.6–1.8	Smaller type needs extra leading to stay readable
Pull quotes / callouts	1.3–1.5	Depends on font size and column width

These are starting points. Always test with real content at your target column width — narrow columns often need a slightly higher ratio.

---

How to use the calculator

1. Enter your font size in pixels (e.g., 16 for body text, 32 for an H1).
2. Drag the ratio slider or pick a preset (Tight → Loose).
3. Read the outputs — you’ll get the ratio, pixel value, em, rem, and a ready-to-copy CSS declaration.
4. Check the WCAG badge — the tool flags whether your ratio meets WCAG 1.4.12 for body text.
5. Preview — see the live text block reflow instantly as you adjust values.

---

Quick CSS reference

/* Body text — WCAG compliant, unitless (recommended) */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Heading — tighter leading */
h1 {
  font-size: 2rem;
  line-height: 1.2;
}

/* Small print */
figcaption {
  font-size: 0.875rem;
  line-height: 1.6;
}

---

Common mistakes to avoid

• Setting a pixel line height and then changing font size — the two fall out of sync and text can overlap.
• Using the same ratio for headings and body — headings look best tighter; body needs more room.
• Ignoring narrow columns — a 700px article column might be fine at 1.5; a 300px sidebar column may need 1.65.
• Forgetting about paragraph spacing — margin-bottom on <p> and line-height work together; adjust both.

---

Related tools

• Font Pairing Tool — Find complementary font combinations for your designs
• CSS Box Shadow Generator — Visually build CSS shadow values
• Color Contrast Checker — Validate WCAG contrast ratios for text
• Relative Luminance Calculator — Understand perceived color brightness