For designers

Balance headings and paragraphs with text-wrap

Two lines of CSS that even out ragged headings and stop paragraphs ending on a single word.

By default, a browser fills each line with as many words as fit, then starts the next. A heading can end up with a long first line and one word below it, and a paragraph can finish on a single word. text-wrap asks the browser to choose its line breaks more carefully.

  • balance evens out the lines, so a two-line heading has two lines of about the same length.
  • pretty looks at the last few lines of a paragraph and moves a word or two, so the last line isn’t one word on its own.

Try it

Drag the edge of the box, or focus the handle and use the arrow keys. A single word on a line of its own is outlined.

text-wrap: wrapthe default0 lines

Important Chinese Ceramics and Works of Art

text-wrap: balance0 lines

Important Chinese Ceramics and Works of Art

The same works for paragraphs, with pretty:

text-wrap: wrapthe default0 lines

Hiroshige’s Sudden Shower at Shōno shows travellers caught in a summer storm on the road between Edo and Kyoto. Bearers run with a palanquin, a farmer bends under a straw cape, and the rain falls in fine diagonal lines across the sheet.

text-wrap: pretty0 lines

Hiroshige’s Sudden Shower at Shōno shows travellers caught in a summer storm on the road between Edo and Kyoto. Bearers run with a palanquin, a farmer bends under a straw cape, and the rain falls in fine diagonal lines across the sheet.

What it means for your designs

You no longer have to design around a bad break. The browser works out the breaks for every title, at every screen width, including copy that doesn’t exist yet. That matters most where the text changes and you never see it: auction titles, lot titles and editorial headlines.

  • Use balance for headings, pull quotes and captions: short text that should look composed. Centred headings gain the most, because a short last line looks off-centre.
  • Use pretty for paragraphs, list items and lot descriptions: longer text where you only want to avoid a single word on the last line.
  • Leave buttons, tags and labels alone. Balanced text can leave space at the end of its box, which shows when the box has a fill or a border.

In Figma

Figma fills lines the browser’s default way, so your frames show the unbalanced version. Don’t fix it by hand. A manual line break or a narrower text box fixes one title at one width, and it breaks as soon as the copy or the screen changes.

Instead, design the text box at its real width and add a note: “Headings: text-wrap: balance. Body: text-wrap: pretty.” Then check the result in the browser rather than in Figma.

Say this to a developer

“Can we add text-wrap: balance to headings and text-wrap: pretty to body text? It’s two rules in the base styles, and browsers that don’t support it ignore it.”

Base styles
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}


p {
  text-wrap: pretty;
}

Prototypes in this repo already have both, from the shared reset (@cdd/reset). So when a heading wraps better in a prototype than on christies.com, this is often why.

Watch out for

Gotcha

balance only works on short text. Chrome and Edge balance up to six lines and Firefox up to 10. Past that, the text wraps as normal. Use it on headings, not on whole paragraphs.

  • Both cost the browser extra work, so apply them to text elements only, never to every element on the page.
  • pretty can add a line. To avoid a single word at the end, it sometimes moves words down, so a paragraph can grow by one line. Leave room for it.
  • A <br> or a non-breaking space added to fix one title will fight balance. Take them out when you switch it on.

Browser support

balance works in every current browser: Chrome and Edge 114, Firefox 121 and Safari 17.5. pretty works in Chrome and Edge 117 and Safari 26, but not yet in Firefox. A browser that doesn't support either wraps text as normal, so nothing breaks.