Web typography: learn how to get rid of widows or orphans in your text on your websites, with a simple string.
What are widows?
Widows, sometimes called orphans or runts, occur when a word is left dangling alone on the last line of a paragraph. Visually widows are not pretty, and this means more than you’d think, as one of the key components that makes humans consider something to be aesthetic is symmetry.
Pretty things attract our attention better than less pretty things — and attention is the most valuable gift a writer can get from their readers. It may appear like a tiny problem in a broad context, but all problems add up, and this particular problem is quick to fix. So let’s fix it.
The most simple way to get rid of widows is to manually add a non-breaking space inside your HTML code.
A non-breaking space acts as a glue between two words, and force them to be on the same line.
A non-breaking space looks like this: .
Non-breaking space example
Here is a line of text inside paragraph tags. Depending on how you define the width of this text block, at some point a word will be left hanging on the last line of the paragraph. It might not be this paragraph, but it will happen at some point, unless you use a non-breaking space.
Try resizing your browser window, and notice how no matter what, the last line of the paragraph above has 2 or more words. That’s because I added between non-breaking space — check the source code for yourself.
If you’re writing inside a visual editor, in a CMS like WordPress, look for a tab that says “Text”, “Code” or “Source” to switch to the HTML editor. If your CMS is formatting-friendly, you should be able to add non-breaking spaces ( ) to your text that way.
Remember to switch back to normal/visual writing mode afterward.
For titles, in WordPress, you can add non-breaking spaces in your posts title input field as I show in this video:
Isn’t it time-consuming to remove widows manually?
Yes. Notice how other paragraphs in this article have widows hanging alone at the end of paragraphs, depending on how wide or narrow you resize your browser window. I’m not going to waste time doing that manually in every single article!
I’m working on a programmatic solution that automatically removes widows, so I don’t have to waste time with this manual nonsense. So far I haven’t found an optimal solution that works 100% of the time — but I will.
How important is it to get rid of widows?
Well, that depends on the context. From a time-usage perspective, if I’m doing it manually I prioritize the heaviest text elements in a document, meaning those that stand out, such as headlines, subheadings, and lead paragraphs. Having widows in your body text is not the end of the world — but if you can get rid of them everywhere with little to no work, e.g. by using JavaScript — then why not do it?
I’ll be back with a tutorial showing how programmatically solve the widow/orphan/runt problem, once I’ve solved it myself :)
