Opens in a new tab

Balance headlines with text-wrap

The same headline shown twice. The top version leaves the word customers alone on the second line, labeled lonely word. The bottom version splits into two even lines, labeled text-wrap: balance.

Headlines that wrap onto a second line often leave a single short word hanging out on its own. It unbalances the design, and it can pull attention toward the least important word in the heading. Designers used to fix this with manual line breaks, which then broke again on other screen sizes.

Nowadays, the CSS property text-wrap: balance handles this for you. It tells the browser to even out the line lengths in short blocks of text, so a two-line headline splits into two lines of similar length. It works best on headings, short intros and captions, and all modern browsers support it. You can add it once to your heading styles, and most awkward breaks will quietly disappear across the whole site.

Get Free Design Lessons Every Monday Morning

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close