Text-wrap: balance Opens An Arbitrarity Hell

The controversial, but attractive CSS style makes it’s way to the browsers. Should we use it? I’ll tell you that!

As I’m usually work in the role of frontend/design developer I often have to track the new stuff released in browsers to see if it’s suitable to use in production web applications.

One of such new features is text-wrap: balanced.

If you’re not familiar with CSS, the text-wrap property describes how we want the text to break into lines.

Browsers usually are pretty good at it. However, from a strict typography point of view, not always. Especially for headings.

There’s an art and science around how to break lines of text, so it will look nice. Look at this header:

The Cat Was Found Jumping On

A Bench

When His Owner Arrived

It’s ok, isn’t it? But look at this one:

The Cat Was Found

Jumping On A Bench

When His Owner Arrived

The second header is easier to read, and looks more attractive.

From the design perspective it also navigates the user’s eyes from top to bottom to the rest of the article, while the first one drives the eyes away from the beginning of the first paragraph. Technically it means cognitive friction we tend to avoid.

Because friction is bad, users go away.

All in all, good text wrapping is a combination of rules and esthetics that makes a header look nice.

It also applies to all sorts of texts. On the Summon The JSON card games I have to manually wrap text to achieve the desired balance.

The lately implemented in some browsers CSS style called text-wrap: balanced aims at providing a satisfactory balance of headers compared to automatic balancing.

The CSS Text Module Level 4 describes the style. Worth to mention it’s not recommended for implemention, but a draft.