Two words of CSS for headlines that break well
text-wrap: balance and text-wrap: pretty settle, in one declaration, the headline broken on a lone word and the paragraph ending on a runt. Where each belongs, and where neither helps.
There is a flaw visible on nearly every website that almost nobody names: the two-line headline whose second line carries a single word. A full line, then “work” sitting alone underneath. In print typography the fault has a name and a subeditor fixes it. On the web it went twenty years without a remedy, because where a headline breaks depends on the width of the screen, so it cannot be set by hand.
Two values of the text-wrap property now take care of it, and they do not do the same job.
balance, for short text
h1, h2, h3, blockquote {
text-wrap: balance;
}The browser tries to spread the text over lines of similar length instead of filling the first one to the edge and letting the remainder fall. A six-word headline over two lines therefore breaks three and three, not five and one.
What matters is what the declaration does not do. Balancing costs several layout passes, and the specification explicitly allows the browser to give up beyond a small number of lines. In practice, past four lines, nothing happens. That is not an awkward limit, it is the guarantee that the property cannot slow a long text down: it is aimed at headlines, standfirsts, captions and pull quotes, and nothing else.
Support is settled. Chrome shipped it first, Safari from version 17.5, Firefox from version 121. The current table is on Can I Use. A browser that does not know the value breaks the headline as before: nobody sees a broken page, some people see a better set one.
pretty, for long text
The other value addresses a different problem: the paragraph ending in a line of one word, what typographers call a runt.
p, li {
text-wrap: pretty;
}The browser looks further ahead before deciding where to break, and arranges the last lines so that none of them is left ridiculous. WebKit set out the work in a dedicated article, which goes beyond the runt alone: the value also avoids runs of hyphens at line ends and lines set too loosely.
Support is more recent. Chrome shipped it in 2023, Safari in version 26. Firefox follows at a distance. The principle is the same as for balance: what the browser does not understand, it ignores, and the text stays readable.
What we do with them
balance on every headline, standfirst and pull quote. pretty on running paragraphs.
Those two lines replace a practice we followed like everyone else, and which deserves to be called by its name: the non-breaking space dropped by hand between the last two words of a headline to force the break. It works, at one screen width, the one you happened to be looking at while doing it. At every other width, it moves the problem along by one word. To see these settings applied to full typographic directions, the style page shows them live.
A setting fault that used to be fixed by hand on one screen, and is now fixed on all of them. We do not write here about the advances that make headlines: we write about the ones that take work away.
Who writes these notes
This journal is kept by the workshop that designs and maintains the house’s websites. Everything described here, the Search Console, internal links, the business profile, is part of the work delivered with a site: if you would rather someone took care of it, that is precisely the trade.