What is the CSS Line Height Tool?
Preview and generate the right line-height value for your text. See live how different values affect readability at various font sizes.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Line Height Tool
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Set font size and sample text
Enter your target font size and type or paste sample paragraph text into the preview area.
Adjust line-height with the slider
Drag the slider between 1.0 and 2.5. The preview updates in real time, showing how the line spacing affects readability.
Copy the CSS value
Click Copy to grab the line-height value. Use the unitless number form for best results.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
/* Unitless multiplier (recommended) */
body { line-height: 1.6; } /* comfortable for body text */
h1, h2, h3 { line-height: 1.2; } /* tighter for headings */
code, pre { line-height: 1.8; } /* extra space for code blocks */
/* Avoid px - it does not scale with font size */
/* Bad: */ p { line-height: 24px; }
/* Good: */ p { line-height: 1.6; }Unitless values are relative to the element font-size and inherited correctly. px line-height does not scale when the font size changes.
Pro tips for better results
Body text reads best at 1.5-1.7
WCAG 1.4.8 recommends a line spacing of at least 1.5 times the font size for body text. Values between 1.5 and 1.7 work well for most typefaces at 16-18px.
Tighten line-height for large headings
Display headings at 48px or larger look best at line-height: 1.1 to 1.2. Loose line-height on large type makes headings feel like separate lines rather than a unit.
Use unitless values for correct inheritance
line-height: 1.6 on body means all child elements compute their own line-height as 1.6 x their font-size. line-height: 24px is inherited as a fixed 24px regardless of the child font-size - which causes compressed text at small sizes.
Code blocks need more line-height than prose
Dense code at 1.6 line-height can be hard to scan. 1.8 or 2.0 makes it easier to see which line is which, especially in long functions.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.