Question 1

What is line height in CSS?

Accepted Answer

Line height (leading in typography) is the vertical distance between lines of text. In CSS, it's set with the line-height property. A unitless value like 1.5 means 1.5 times the font size. For 16px text with line-height: 1.5, the line height would be 24px.

Question 2

What is the recommended line height for body text?

Accepted Answer

For body text, 1.5 to 1.6 is the commonly recommended range. This provides comfortable spacing between lines for reading. The W3C Web Content Accessibility Guidelines recommend at least 1.5 for body text.

Question 3

What line height should I use for headings?

Accepted Answer

Headings work best with tighter line heights of 1.1 to 1.3. Headings are typically short, so extra line spacing would create too much visual gap between heading lines.

Question 4

Should I use px, em, or unitless values for line-height?

Accepted Answer

Unitless values (like 1.5) are preferred because they scale proportionally with font size. Using px values means line height won't adjust if font size changes. em values behave similarly to unitless but can cause unexpected inheritance issues.

Question 5

How does line height affect readability?

Accepted Answer

Too little line height makes text feel cramped and hard to read. Too much creates a disjointed reading experience. Optimal line height keeps the eye flowing naturally from line to line. The ideal ratio also depends on line length — wider columns benefit from more line height.

Line Height Calculator

常见问题

Comments & Feedback