text-wrap: balance and pretty — typography the browser fixes now
Every designer knows the headline that breaks with one lonely word on the second line—and the ritual that follows: rewrite the copy, insert a manual break, pray nobody edits the CMS. Line breaking was the last part of typography we still fixed by hand, because the browser’s greedy algorithm fills each line maximally with no regard for how the paragraph ends up looking.
Two properties retire the ritual.
balance, for headlines
h1, h2, .card-title {
text-wrap: balance;
}balance makes the browser distribute words so every line of the block lands at roughly equal length—no more six-words-then-one. It re-balances on every resize, every CMS edit, every translation into a longer language. It is scoped (engines cap it around four to six lines) precisely because it is meant for headings, standfirsts, and card titles—apply it there globally and forget it exists.
pretty, for everything else
p, li {
text-wrap: pretty;
}pretty is subtler: it lets the layout engine look ahead and accept slightly-less-full lines to avoid typographic misdemeanours—chiefly the orphan, a single stranded word closing a paragraph. Costs a whisker of layout time, removes a century-old print embarrassment from the entire site in one declaration.
“Good typography was never about fonts. It was about a thousand tiny breaking decisions — that the browser now makes for you.”
Both are progressive enhancement in its ideal form: unsupported browsers simply wrap the old way. Two lines in your reset, better typography on every page you will ever ship. The 1% rule rarely comes this cheap.