• Success Criterion 1.4.4
  • Conformance level AA

Fixed Line Height Causing Enlarged Text to Overlap Itself

1.4.4 — Resize Text

Scenario

Setting

An online marketplace's seller dashboard

What’s wrong

Line-height fixed in px so enlarged glyphs overlap vertically.

Example 

.listing-title { font-size: 14px; line-height: 14px; }
<!-- at 200% zoom the font grows but the fixed 14px line-height doesn't, so lines of text overlap vertically -->

Why it matters

A seller reviewing a table of listing titles at 200% zoom sees overlapping, unreadable rows where lines collide.

How to test

Set zoom to 200% and check multi-line text: if line-height is fixed in px, enlarged glyphs overlap the line above/below.

How to fix

Use a unitless line-height so it scales proportionally with the font size instead of staying fixed in pixels.

.listing-title { font-size: 14px; line-height: 1.4; }

Outcome

The seller reads each listing title on its own line, cleanly separated even at 200% zoom.

Who is affected

Low-vision users, for whom overlapping text at higher zoom is often worse than small text was to begin with.

Learn more

Related scenarios