A widow or orphan is a bit of text that is hanging off the rest of the block and looks out of place or unbalanced. In web designs, it is most often caused by a block of text that is slightly too long for the space it’s placed in.
For example:
The quick brown fox jumped over the lazy
dog.
I created this orphan artificially, but the point is clear—one word alone on a line looks bad. Plus, orphans can change the meaning of your text. What does this headline say to you:
How to Walk Across the Bay
Bridge
Many web designers do’t think about widows or orphans because they don’t use real text for testing. Instead, they use blocks of latin text or “lorem ipsum” to represent the text on the page. Designers also don’t always control the width of the page—especially designers that use flexible-width layouts.
When you don’t know exactly how wide your web pages are going to be, it’s very difficult to set the text so that you avoid widows and orphans. But there are two things you should be doing to make sure your pages don’t look unprofessional:
- Set a max-width and min-width on your designs. Then, even if your pages are flexible in width, they won’t get so wide or narrow that they are unreadable.
- Test your pages with the real text. Once you’ve got the real copy for your website, make sure you look at the design with that real copy so you know where the paragraphs break and you prevent widows and orphans as much as possible.
How to Fix Widows and Orphans
Beyond using the min- and max-width properties, there are a few things you can do.
Add or remove text. If you are the author of the content, this is an easy way to fix most orphans. By adding or removing text, you can manage the size of the paragraphs. You can also look for a synonym of the orphan word that is longer. Often, the longer the hanging word is the better it looks, even if it is just one word on the line.
Play with the tracking. Using the CSS style properties letter-spacing and word-spacing you can add or remove space from the text so that the lines tighten up, removing the orphan.
Change the font size. If you make the font size just slightly smaller or larger, widows and orphans may disappear. However, you may find new ones.
Try CSS 3. CSS 3 will provide a new style property hyphenate. In browsers that support this property, the text will hyphenate automatically.
I don’t recommend manual hyphenation. Hyphenation is difficult on web pages. Browsers don’t do it automatically, so in order to get it to work you need to have a script that will hyphenate your words for you. If you add hyphens in manually, you run the risk of words with internal hyphens in the middle of a line. And while you can add a soft-hyphen (­) into all the words that you want to hyphenate, some browsers display this hyphen no matter where the word is, and others don’t display it at all.
