text-wrap: balance and pretty
Mixing up the one for headings and the one for paragraphs costs you performance for nothing.
A heading that wraps to two lines with one word stranded on the second is probably the most common piece of ugliness on a website. For years the fix was a non-breaking space typed in by hand. It lasted until the next time somebody edited the copy.
h1, h2, h3 {
text-wrap: balance;
}balance evens the lines out so a heading breaks somewhere sensible. Chrome caps it at 6 lines and Firefox at 10 because balancing is expensive. On a long paragraph the layout cost would be real.
p {
text-wrap: pretty;
}pretty is the one for body text. It doesn’t even the lines out; it just looks ahead far enough to avoid a single-word last line and some of the worse breaks. And it’s cheap enough to put on every paragraph.
So the rule is just balance for things with 2 or 3 lines and pretty for things with 10. Putting balance on body copy is the mistake to avoid. It fails quietly by doing nothing to anything past the line cap.
Both fall back to normal wrapping in a browser that doesn’t know them, which makes this about the lowest-risk thing you can add to a stylesheet. I put both rules in a project’s base layer now and never think about them again.