Skip to content

Rule · Design

Headings do not use text-wrap: balance

design/heading-no-balanceinfovoid designupdated

Why it matters

Browsers fill each line greedily, so multi-line headings often end with a single orphaned word. That makes a headline look unfinished.

How to fix it

Set text-wrap: balance on h1-h3 (and text-wrap: pretty on paragraphs).

Example

ts
h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; }

void design reports 19 rules in this category. Measured design heuristics from computed styles: font families, type scale, line length, palette and accent sprawl, spacing grid, radius sprawl, dark mode and the tells of generated UI.