Enhancing Web Typography with text‑wrap: balance

At the end of last month, I wrote about text‑wrap: pretty and how this recent addition to CSS makes some of the previous techniques I had used and talked about for controlling typography on‑screen ‑ especially when it comes to avoiding runts of orphans at the end of paragraphs ‑ redundant.

Here, I'd like to discuss the close relation; text‑wrap: balance. Although similar (in that it's a relatively new addition to the CSS Text Module draft), using balance instead of pretty achieves quite a different visual effect by balancing lines of text against one another, which is especially useful for shorter text elements like page titles and headlines.

It's a different approach to text‑wrap: pretty, and achieves a different effect, but text‑wrap: balance is equally important when it comes to displaying visually appealing and harmoniously‑balanced text in our websites.

Understanding text‑wrap: balance

text‑wrap: balance is a new(ish) CSS property that aims to distribute the length of each line of text within a block more evenly. Unlike text‑wrap: pretty, which focuses on preventing orphans at the end of paragraphs, balance ensures that the lines in a text block are of similar length, creating a more symmetrical and visually appealing layout.

In action, it looks like this:

For the sake of a direct comparison, here is the same block of text, but with text‑wrap: pretty toggled on and off:

Both balance and pretty are part of the evolving CSS Text Module and (as with many newer CSS features) browser support is currently ok, but still quite limited.

Practical Applications of text‑wrap: balance

In practical terms, text‑wrap: balance can dramatically improve the appearance of headlines and titles. I use it extensively across the titles you see here on my personal website in fact!

To offer another example, consider the product listing page on one of the big e‑commerce websites I once worked on. Here is a row of products, with their titles rendered normally:

You'll hopefully notice that some of the titles break unevenly across lines, and leave a visually jarring short line at the end. You also get these really long lines of text, sometimes followed by a single word, which makes it difficult for the user to read.

Now, here is the exact same screenshot, but this time I've added text‑wrap: balance to the titles:

As you can see, the product items now look much cleaner; the titles do not run extremely long but instead, each line in the title is balanced against the other. Although this makes it more visually appealing, what it also does ‑ and perhaps more importantly ‑ it improves the user's experience of the site, making it easier to scan the product results and find the one they want to buy.

This becomes particularly helpful in responsive design where fluid layouts mean that any title could have an awkward break in it at any point. Using text‑wrap: balance in this way ensures that the text elements adapt and display harmoniously regardless of the screen sizes.

text‑wrap: balance vs. text‑wrap: pretty

Although similar, text‑wrap: pretty and text‑wrap: balance address different typographic challenges in web design.

text‑wrap: pretty focuses on eliminating orphans in longer text blocks, ensuring that paragraphs don't end with a single isolated word. On the other hand, text‑wrap: balance aims to evenly distribute text across each line in shorter elements, like headlines or titles, ensuring that lines are of similar length for a balanced appearance.

Whilst pretty enhances readability for larger pieces of text (like paragraphs), balance improves the visual harmony of shorter text elements.

Wrapping up

There isn't much more to say here aside from to share a little personal advice: I like to use pretty in my base stylesheet and apply it to every p, li, and blockquote. I also like to apply text‑wrap: balance to all my titles. Something like this:

p, li,blockquote {  text-wrap: pretty;}h1, h2, h3, h4, h5, h6 {  text-wrap: balance;}

With these few lines of CSS, you can very easily improve the way that text renders across your website or application. Assuming ‑ of course ‑ that your user's browsers support it at this early stage...