Free Typography Tool
Line Height Calculator: Find the Optimal Line Height for CSS
Enter a font size, pick a method, and get the recommended line height as a unitless CSS value, px, and rem — with a live preview and copy-ready CSS. Golden ratio, WCAG 1.5, tight headings, or your own custom ratio.
Your type settings
font-size: 16px;
line-height: 1.7;
Live preview
Good typography is invisible. Readers notice only that the words were easy to move through — that the lines were the right length, the leading gave each row a little air, and nothing pulled the eye off track. Adjust the settings and watch this paragraph breathe.
How to Use the Line Height Calculator
Type your font size in pixels, then choose a calculation method. Golden ratio (1.618) is a classic starting point for comfortable body text. WCAG-friendly (1.5) matches the accessibility guideline for readable paragraphs. Tight (1.1–1.25) suits large headings, where generous spacing looks disconnected. Or enter a custom ratio if your design system already defines one. Optionally add your content width so the calculator can flag when longer lines call for extra leading.
The tool returns three formats of the same value, and it matters which one you ship:
Unitless (e.g. line-height: 1.6) is the best practice for CSS. A unitless value is inherited as a ratio, so child elements recalculate line height against their own font size. That means your 14px captions and 24px subheads each get sensible spacing from a single declaration.
Pixels (e.g. line-height: 25.6px) lock the line box to a fixed height. Useful for pixel-perfect components like buttons or single-line labels, but risky for flowing text — if the font size ever changes, the fixed value doesn't follow, and lines can overlap or gap awkwardly.
Rem (e.g. line-height: 1.6rem) scales with the root font size, which respects user browser settings. It's safer than px, but it still inherits as a computed length, not a ratio — so nested elements with different font sizes can end up with the wrong spacing.
Check the live preview to judge the rhythm with your own eyes, then copy the CSS snippet straight into your stylesheet.
What Is Line Height, and Does the Golden Ratio Really Work?
Line height (traditionally called leading, after the strips of lead typesetters placed between rows of metal type) is the vertical distance from one text baseline to the next. It controls how dense or airy a block of text feels, and it has an outsized effect on readability: too tight and lines blur together, too loose and the eye loses its place moving from the end of one line to the start of the next.
The golden ratio method multiplies your font size by 1.618 — the same proportion found throughout classical art and architecture. For 16px text, that yields roughly 26px, or a unitless value of about 1.62. It's popular because it lands squarely in the comfortable range for body copy, and "the golden ratio" makes for a satisfying story.
Here's the honest version: it's a useful heuristic, not a law of nature. There is no perceptual research showing 1.618 is uniquely optimal. What the evidence does support is a range — roughly 1.4 to 1.8 for body text — with the sweet spot shifting based on typeface, font size, and especially line length. Longer lines need more leading, because the eye travels farther on its return sweep and needs a clearer landing strip. A 45-character mobile column reads fine at 1.5; a 90-character desktop column often wants 1.7 or more. Fonts with a large x-height or heavy weight also benefit from extra breathing room. Use the golden ratio as a strong default, then adjust by eye and by measure — that's exactly what the content width option in this calculator helps you do.
Recommended Line Heights: Quick Cheat Sheet
Sensible starting values for common text roles, expressed as unitless ratios:
- Body text: 1.5–1.7. The workhorse range for paragraphs. Start at 1.5 for narrow columns and move toward 1.6–1.7 as line length grows past 70–75 characters.
- Headings: 1.1–1.3. Large display text needs tighter spacing — at 1.5, a two-line 48px headline splits into two disconnected fragments. The bigger the type, the tighter the ratio.
- Captions and small text: around 1.4. Short, small text (12–14px) tolerates slightly tighter spacing than body copy, though never so tight that ascenders and descenders collide.
- Accessibility baseline: WCAG success criterion 1.4.12 expects body text to remain readable at a line height of at least 1.5 times the font size. Treat 1.5 as the floor for paragraph text, not the ceiling.
- UI elements: buttons, badges, and single-line inputs often use 1.0–1.2 or a fixed px value, since there's no multi-line reading flow to protect.
Whatever you choose, apply it consistently: a predictable vertical rhythm across your page does more for perceived polish than any single perfect number.
Frequently asked questions
What is a good line height for body text?
For paragraphs, a unitless line height between 1.5 and 1.7 works for most typefaces and sizes. Use 1.5 as your minimum — it matches the WCAG readability guideline — and increase toward 1.6 or 1.7 for wider columns, larger x-height fonts, or long-form reading. At a typical 16px font size, that's 24px to 27px between baselines.
Should I use unitless line height or pixels in CSS?
Unitless, almost always. A unitless value like line-height: 1.6 is inherited as a ratio, so every descendant recalculates spacing against its own font size. Px and rem values inherit as fixed computed lengths, which breaks when nested elements use different font sizes. Reserve px for tightly controlled single-line components like buttons or tags.
Does WCAG require a line height of 1.5?
Not exactly a requirement for authors — WCAG 2.1 success criterion 1.4.12 (Text Spacing) requires that content still works when a user overrides line height to 1.5 times the font size, without loss of content or functionality. In practice, shipping body text at 1.5 or above is the simplest way to meet the spirit of the guideline and keep text readable for people with dyslexia or low vision.
What line height should I use for headings?
Between 1.1 and 1.3, and tighter as the type gets bigger. Headings are short and large, so the generous spacing that helps paragraphs makes multi-line headlines fall apart visually. A 32px heading usually looks right around 1.2 (38–39px); a 56px display headline may want 1.1 or even 1.05.
How does content width affect the ideal line height?
Longer lines need more line height. When your eye finishes a line, it sweeps back to find the start of the next one — the farther it travels, the more vertical separation it needs to land on the right line. Narrow mobile columns (about 45–55 characters) read well at 1.5, while wide desktop columns (75–90 characters) typically need 1.6–1.8. That's why this calculator lets you enter your content width.
How do I convert a px line height to a unitless value?
Divide the line height by the font size. For example, 28px line height on 16px text is 28 ÷ 16 = 1.75, so you'd write line-height: 1.75. Going the other way, multiply: a 1.6 ratio at 18px gives 28.8px. This calculator does both conversions for you and also outputs the rem equivalent based on a 16px root.
