Line-height vs letter-spacing: impact on readability and values for body vs headings

WHAT THIS TESTS: The interviewer wants to know if you can separate vertical metrics from horizontal metrics and justify values based on reading context rather than aesthetics alone. At the senior level this signals that you design with accessibility and legibility constraints in mind, not just visual polish.

A GOOD ANSWER COVERS: First, define line-height as the vertical distance between baselines that creates rhythm and prevents crowding, while letter-spacing is the horizontal adjustment between glyphs that affects word shape recognition. Second, state that body text needs generous line-height, typically at least 1.5 times the font size per WCAG 2.1 Success Criterion 1.4.12, because dense lines cause fatigue and tracking errors during long reading sessions. Third, note that body text should use minimal or zero letter-spacing so that word shapes remain familiar and readable. Fourth, explain that headings are shorter phrases read at a glance, so they can tolerate tighter line-height and may even benefit from slight negative letter-spacing to maintain visual density and prevent airy gaps in large type. Fifth, mention that user agents must be able to override these values without breaking layout, so fixed heights and overflow hidden containers are dangerous.

COMMON WRONG ANSWERS: A red flag is treating line-height and letter-spacing as interchangeable or applying the same scale to both elements. Another mistake is choosing values purely from a Figma file without referencing accessibility baselines like the WCAG 1.4.12 minimums of 1.5 line-height and 0.12 times the font size for letter-spacing. Candidates also stumble when they recommend tight line-height for body text to achieve a compact visual style, which sacrifices readability for aesthetics.

LIKELY FOLLOW-UPS: The interviewer may ask how you would test these values across languages or scripts that do not use paragraph spacing. They might also ask how you prevent layout breakage when users apply browser extensions that force larger text spacing, or how you balance design system tokens between marketing headings and long-form editorial content.

ONE CONCRETE EXAMPLE: Imagine a 16 pixel body paragraph in a news article. You would set line-height to 1.5 or 24 pixels and keep letter-spacing at the default zero so that the eye tracks smoothly from line to line. For a 32 pixel H2 headline above it, you might set line-height to 1.2 or roughly 38 pixels and letter-spacing to negative 0.02 ems to tighten the gaps without crushing the letterforms. If a user overrides the page with a bookmarklet that forces 1.5 line-height and 0.12 times the font size letter-spacing, the article paragraphs should reflow cleanly without clipping or overlapping, while the heading simply becomes more open but remains legible.

Source: W3C WCAG 2.1 Understanding Success Criterion 1.4.12: Text Spacing