An end to typographic widows on the web | Clagnut by Richard Rutter
Posted by jpluimers on 2026/10/13
A few years ago, [Wayback/Archive] An end to typographic widows on the web | Clagnut by Richard Rutter talked about the CSS style text-wrap:balance and wished for text-wrap:pretty.
By now, most browsers should have implemented both and – for body text – I would recommend setting them as default.
Rendering will be a tad slower, but you will hardly see any orphan words on the rendered last line of a paragraph.
Widows – the dangling line on a new page – is another thing, though people seem to confuse them according to Widows and orphans – Wikipedia (:
Via:
- [Wayback/Archive] Chris Coyier on Twitter: “I was unaware of `text-wrap: pretty;` I knew about the (new/cool) `
text-wrap: balance;` — but sometimes that’s a bit… too much. I feel like it’s nice on headers but not smaller type. Here’s what I mean.” - [Wayback/Archive] Chris Coyier on Twitter: “Here’s a little “message” element that you might plop into a web app. We don’t want to force it to one line necessarily, but it does look awfully awkward if it wraps a single word. (In the past, we might do like `
is bad` at the end there to avoid this, but 👎).”
- [Wayback/Archive] Chris Coyier on Twitter: “`
text-wrap: balance;` totally does avoid the orphan, but it’s just too weird in this context. It leaves too much space.”
- [Wayback/Archive] Chris Coyier on Twitter: “And so! `
text-wrap: pretty;` to the rescue, it looks like. @argyleink says Chrome Stable soon! Nice little enhancement, I’d say. I’d maybe use it… everywhere? Even in a reset?”
- [Wayback/Archive] Chris Coyier on Twitter: “So I suppose this is the `text-wrap: 2 widows;` thing that @clagnut was on about here:
clagnut.com/blog/2424Less control but maybe still good enough?” - [Wayback/Archive] Jonnie Hallman on Twitter: “@chriscoyier @clagnut I lol’d”
–jeroen
https://twitter.com/destroytoday/status/1681457583482372098
Leave a Comment