CSS Line Height Previewer
Preview line-height values against real paragraph text.
Find comfortable line-height
Line-height (leading) is one of the biggest levers on readability — too tight and paragraphs feel cramped, too loose and they lose cohesion. This previewer applies line-height values to real paragraph text so you can judge the spacing directly.
Because ideal leading depends on font size and measure, comparing values against actual copy beats picking a number blind. Adjust until the paragraph breathes without falling apart, then copy the line-height value into your type styles.
Leading, previewed
A unitless line-height like 1.5 scales with font size, which is safer than a fixed pixel value. The preview runs in your browser.
Frequently asked questions
Should line-height have a unit?
Use a unitless number like 1.6. Children inherit it as a ratio of their own font size, while px or em values are inherited as a fixed length and can squash nested text.
What line-height is best for body text?
Around 1.5 to 1.7 for paragraphs. Headings can go tighter, 1.1 to 1.3, because they are short and set larger.
Does line-height matter for accessibility?
WCAG 1.4.12 requires content to stay readable when users set line-height to 1.5, and 1.4.8 (AAA) recommends at least 1.5 within paragraphs.
Related tools
Practical utilities for front-end design and implementation work.