Stop Building Ugly Headlines: Why CSS text-wrap: balance and pretty Are Pure Gold

Picture the scene. You have built a spotless layout. The colour palette is sharp. Your assets are compressed down to featherweight files using something like WEBP Converter. Everything feels pristine until your client looks at the staging site on an iPad Mini.

Right across the giant hero banner sits a three line heading. Two massive lines of punchy copy followed by one pathetic little word sitting all by itself on line three.

A widow. An orphan. A design disaster that makes the entire page look clumsy.

For years our industry solved this with clumsy hacks. We stuffed non breaking spaces into CMS titles. We wrote nasty little client side JavaScript plugins to measure container dimensions. We peppered headings with rigid line breaks that broke spectacularly the second someone switched device orientation.

Turns out the CSS Working Group noticed our collective agony. With text-wrap: balance and text-wrap: pretty, we can finally let the browser handle awkward breaks natively.

The Problem With Traditional Line Breaking

Default web wrapping is utilitarian. The browser reads words in order, packs as many onto line one as the container width allows, and only drops down to line two when it physically runs out of room.

That algorithm is fast. It is efficient. It also creates dreadful visual rhythm on short display headings. You end up with a very long line followed immediately by an awkwardly stubby tail.

Take this classic hero text:

<h1>The Fastest Way To Optimise Images For Modern Web Applications</h1>

On a medium display, default wrapping might squeeze all words except "Applications" onto the first lines, leaving that solitary word marooned below. It draws the eye for all the wrong reasons. It feels unfinished.

Enter text-wrap: balance

According to MDN Web Docs on text-wrap, text-wrap: balance tells the browser engine to calculate the optimal line breaks so every line in the block ends up roughly equal in width.

Instead of stuffing line one to maximum capacity, the browser shares the load evenly:

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

Just one property. Suddenly your headings look like an editorial designer typeset them by hand.

There is a sensible catch. Calculating equal line widths is computationally heavier than standard greedy line breaking. Because of that, browser engines intentionally cap balance to short blocks of text. According to MDN Web Docs, Chromium limits balancing to six lines or fewer, while Firefox supports up to ten lines.

Do not slap text-wrap: balance on your long body paragraphs. The browser will ignore it anyway once it exceeds the line limit, and running complex balancing algorithms across thousands of words of blog prose would just punish rendering performance.

What About text-wrap: pretty?

If balancing is meant for headings, what should we do with our actual body copy?

Enter text-wrap: pretty.

While balance tries to make every line equal in width, pretty focuses on typographic rhythm. It evaluates the final four lines of a text block and tweaks the break points specifically to prevent orphans. It stops a single stray word or short syllable from getting dumped onto the final line alone.

p {
  text-wrap: pretty;
}

As explained by MDN Web Docs, text-wrap: pretty uses a slightly slower algorithm favouring layout cleanliness over raw layout speed. It avoids the visually jarring orphan without reshaping the entire paragraph into neat horizontal slabs like balance would attempt to do.

Comparing text-wrap Values

Here is how the main values stack up when designing modern responsive layouts:

Browser Support and Progressive Enhancement

Typographic features like this are the textbook definition of progressive enhancement.

According to Can I Use for text-wrap: balance, global support sits comfortably above 92%. The feature was recognised as part of Baseline 2024 across major modern engines.

What happens in older browsers or quirky mobile engines that do not recognise the property? Absolutely nothing bad. The browser ignores the unfamiliar CSS rule and falls back to standard line wrapping. Your headline still renders. The page does not break. Nobody gets an error message. It just wraps normally.

You do not need polyfills. You do not need JavaScript event listeners watching the resize event. You do not need build time plugins.

Real World Rules of Thumb

To keep your typographic hierarchy looking clean without introducing performance bottlenecks, adopt a simple stylesheet reset:

/* Keep headings visually weighted and tidy */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* Keep paragraphs readable and free of stray orphans */
p, li {
  text-wrap: pretty;
}

If you work with utility frameworks like Tailwind CSS, you can apply these directly using classes like text-balance for headers and text-pretty for body text.

One small warning… keep your total layout budget in mind. Beautiful typography cannot save a slow page if your media pipeline is neglected. Pair clean CSS rules with lightweight assets, proper image sizing, and modern formats like WebP or AVIF so the page looks neat and loads instantly.

Frequently Asked Questions

Can I use text-wrap: balance on body paragraphs?

You can technically declare it, but browsers will not run it on long text blocks. Chromium restricts balancing to blocks of six lines or fewer, and Firefox restricts it to ten lines. For paragraphs, use text-wrap: pretty instead.

Does text-wrap: balance cause Cumulative Layout Shift?

No. The line balance calculations are resolved during the layout phase before pixels are painted to the screen. It behaves like standard text layout without the unexpected jumps caused by delayed JavaScriptDOM alterations.

What is the difference between balance and pretty?

balance aims to make all lines roughly the same horizontal length, which is ideal for short headings. pretty focuses specifically on preventing isolated orphan words on the last line of a paragraph while preserving normal text flow.

The Bottom Line

We spent two decades writing brittle scripts and inserting invisible punctuation entities just to keep headlines from looking silly on mobile displays.

With text-wrap: balance and text-wrap: pretty, the browser engine finally does the heavy lifting for us. Add those two lines to your global styles, delete your old wrapping workarounds, and enjoy headlines that actually look intentional across every screen width.