Line Height CSS Calculator
Fast, accurate and free online line height css calculator tool running directly in your browser.
-
1Enter data
Enter content, paste text or load a file from disk. -
2Click the button
The tool will immediately process your data in the browser. -
3Get the result
Copy the finished text or save the file to your device.
return "Result ready in 0.1s";
}
Rate this tool:
Related tools
Other tools you may find usefulCSS line-height calculator – readable text without guessing
Line-height (line height) is one of the most important parameters of web typography. Too small: text is illegible and cramped. Too large: the page looks "loose" and the text loses rhythm. The calculator calculates the optimal value for a given font-size.
How line-height works
Line-height is the distance between the baselines of subsequent lines of text. It consists of: cap-height (height of capital letters) + descenders (tails) + leading (space above and below). Unitless value (e.g. 1.5): multiplies the font-size. px: constant value. em: relative to the font-size of the element. %: percentage of font-size.
Optimal line-height values
Main content (body text, 14-18px): 1.4-1.6 (140-160%). Headers (h1-h3, 24px+): 1.1-1.3 (110-130%). Small labels (<12px): 1.2-1.4. Narrow columns (<400px): 1.5-1.7 for better readability. Multi-line quotes: 1.6-1.8. Code (monospace): 1.4-1.6. WCAG 1.4.12 recommendation: at least 1.5× font-size.
Why unitless is best
line-height: 1.5 (unitless) vs line-height: 1.5em. Difference: unitless inherits a value scaled to the child's font-size. 1.5em inherits the calculated px value of the parent. Example: parent 16px, child 24px. Unitless: child = 24×1.5=36px. em: child inherits 16×1.5=24px (too small for 24px text).
Typography Tools
Modular scale: a set of harmonious text sizes and line-height based on the ratio (1.333, 1.414, 1.618). type-scale.com: generate typographic scale. Tool: enter font-size, get recommended line-height in different units with text preview.
Frequently asked questions
What line-height does WCAG 2.1 meet?
WCAG 1.4.12 (Text Spacing): line-height at least 1.5 times larger than font-size. AA standard. The user must be able to change the line-height without losing content (the page should not "break" with large spacing). Check out: Text Spacing bookmarklet (Adrian Roselli).
How does line-height affect SEO?
Indirectly: readable text (good line-height) = lower bounce rate = longer time on the website = positive UX signal for Google. Google Core Web Vitals does not directly measure line-height. But text readability falls under "Page Experience".
What is "leading" and where does the term come from?
Leading (pronounced "ledding"): additional space between lines, historically inserted by lead plates between the lines in the printing house. In CSS: space added to line-height beyond font metrics. A term used in Illustrator, InDesign - not directly in CSS, but the concept is the same.
How to calculate line-height for multi-line headings?
Problem: h1 header with large font-size (48px) and line-height: 1.1 = 52.8px between baseline. When the header wraps to 2 lines, it looks normal. But h1 with line-height: 1.5 = 72px – too much space between the header lines. Rule: headings = smaller line-height (1.1-1.3), content = larger (1.4-1.6).
Does line-height affect clicks in the interface?
Yes - small line-height on clickable link lists makes clicking more difficult (Fitts's Law). WCAG 2.5.8 (Target Size): minimum 24×24px target size. For text lines: padding-block: 8px on the list line ensures the appropriate target size regardless of line-height.
Related tools: em/rem to pixel converter, flexbox sandbox and CSS tooltip generator.