Journal · Engineering

There's one word stranded at the end of your headline

A single word alone on the last line of a headline is called a runt, and one line of CSS, text-wrap: balance, fixes it for 91 percent of the people visiting your site.

There's one word stranded at the end of your

I pulled up a physical therapy clinic's website in their own parking lot in Fishers last Thursday. The headline took three lines on my phone. The third line was one word: you.

It read like a mistake. Nobody typed it that way. The browser broke the line there because nothing told it where else to break, and the clinic has never seen it, because they built the site on a laptop.

The fix is one line of code: text-wrap: balance. It tells the browser to split a headline evenly across however many lines it needs instead of dumping the leftovers on the last one. That property has worked in Chrome, Safari, Firefox, and Edge since October 2024. On August 14 of this year Figma added a button for it, which means the mockups your designer hands your developer are about to start asking for it by default.

What is that lonely word called?

Printers named this problem before anybody had a browser to blame, and five centuries later they still argue about the vocabulary.

A widow, in Butterick's Practical Typography and the Chicago Manual of Style, is the last line of a paragraph stranded at the top of the next page. An orphan is the first line of a paragraph stranded at the bottom of one. Half the industry uses those two backwards.

The thing on your homepage is neither, because a web page has no page breaks. A single short word alone on the last line of a block of text is a runt. That is the one you keep seeing and had no name for.

Why one stranded word makes a headline look cheap

Look at the shape instead of the words. A three-line headline whose third line is 8 percent full leaves a wide empty rectangle underneath it. Your eye reads that gap as unfinished.

A sign painter would never do this. Hand-lettering a window on Broad Ripple Avenue, they break the line where the meaning breaks, because they can see the whole panel while they work. The browser sees nothing. It fills line one to the edge, fills line two to the edge, and drops whatever is left onto line three.

A headline that ends with one lonely word doesn't read as a style choice. It reads as something nobody checked.

Buttons get runts too, and nobody checks buttons. A tax office in Irvington has a call to action that reads "Schedule your free consultation" on a laptop and breaks on an iPhone into "Schedule your free" over "consultation," the last word floating off-center in a box twice the height it needs. That button is the most valuable rectangle on the page.

What changed on August 14

Figma shipped it. The release note runs two sentences: "Text wrap makes your text responsive with two new options: Balance and Pretty."

Setting What it does Where it belongs
balance Evens out the characters per line Headlines, subheads, buttons, card titles, captions
pretty Keeps more than one word on the final line Paragraphs of body copy
auto Browser default. Fill each line, dump the rest Long text where the shape doesn't matter

This matters past Figma because of who opens Figma. The design file is the spec. Once a setting has a visible control in the tool, it lands in the file, and then it lands in whatever a developer builds from that file. The CSS sat there for almost two years and almost nobody switched it on, and I think that is mostly because there was no checkbox to forget about.

How do I fix this on my own website?

Hand your web person these six lines. It is a paste, not a project.

h1, h2, h3, h4,
button, .button, .card-title, figcaption {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

It goes in a different place depending on what your site runs on.

Platform Where to paste it
Squarespace The Custom CSS panel, under Website Tools. Included on paid plans.
WordPress Appearance, then Customize, then Additional CSS
Wix Studio The Code panel, then Page Code, then global.css
Wix classic editor Not available. Wix's own help center logs it as a standing request
Shopify Your theme's base.css or theme.css
Custom-built Wherever your global stylesheet already lives

Two things to know before you promise anybody a miracle.

The two values do not have the same support. balance works everywhere that counts. pretty still has a hole in it.

Value Chrome / Edge Safari Firefox
balance 114 and up 17.5 and up 121 and up
pretty 117 and up 26 and up Not yet

Can I Use puts balance at 91.6 percent of global traffic as of August 2026. Firefox visitors get ordinary wrapping on pretty and nothing else changes, so put it in anyway.

The second thing: balance gives up on purpose once text gets long. Chromium stops balancing past 6 lines, Firefox past 10. Balancing every paragraph on a page would cost real rendering time, so the browsers drew a line. Use balance on short text and pretty on long text and you will never reach the ceiling.

When the code is the wrong fix

Sometimes a runt is telling you the headline is too long.

"Full-service physical therapy for patients throughout Central Indiana" is eight words, and it will break badly at some screen width no matter what you tell the browser. Cut it to "Physical therapy in Fishers" and the problem goes away with no CSS at all. Short headlines also convert better, which is a separate argument for the same edit.

Check your work the way a customer would see it. Not on a laptop with the browser window dragged narrow, which lies about font sizes. Use a real phone. And while you are in there, if the headline is light gray on white, the line break is the smaller of your two problems.

What if your web person says no?

Ask how long it takes. The honest answer is under a minute. If the answer is "we would need to scope that," you have learned something useful about the arrangement you are in. A fifteen-minute audit usually turns up four or five of these sitting together. We fix them for the shops we build for without anybody opening a ticket, which is most of what a monthly site actually buys you.

I never went in to tell the clinic. Their you is still hanging there this morning, one word wide, on a page somebody paid for. Whoever sits at that front desk will fix it in thirty seconds some Tuesday, once it has a name.


Sources

# Source What it backed up
1 Figma release notes The August 14, 2026 text wrap release and the exact wording of Balance and Pretty.
2 MDN: text-wrap-style What balance, pretty, stable and auto do, plus the 6-line Chromium and 10-line Firefox balancing limits.
3 Can I Use: CSS text-wrap balance 91.6 percent global support and the per-browser version numbers.
4 Butterick's Practical Typography: widow and orphan control The widow and orphan definitions, and that the two terms get used inconsistently.
5 Squarespace: add custom CSS to your site Where Squarespace keeps the Custom CSS panel.
6 Wix Studio: about CSS editing That Wix Studio keeps a site-wide global.css page inside the Code panel.

Luminest builds websites for small businesses from $100/mo and custom software from $12k. Book a free 30-minute call.