Managing widows and orphans in email copy

Three detailed code techniques for improving your typography

Sean Hinton

First up, what are widows and orphans?

Widows and orphans are typographical terms for when a word is left on its own line at the start or end of a paragraph. They are considered poor typography. There are lots of reasons why they’re called bad typography: they look untidy; they suddenly end a paragraph; they leave a lot of white space between paragraphs. In email we’ll usually be dealing with widows — lone words at the end of a paragraph.

Here’s a real world example of Ikea using two different ways to manage widows in a paragraph. Resize this email and see how the paragraph below “Re-balance your home with green” acts. The final few words, “smallest of spaces”, never break across multiple lines.

Let’s take a look at the two main ways to manage widows, and a third neat trick.

Non-breaking space

Putting a non-breaking space ( ) between words instead of a normal space means it will not break on new lines, as you might have guess from the name. This is literally what this HTML entity was invented for, borrowed from word processors.

A garden can flourish in the smallest of spaces.

CSS white-space

You can wrap any number of words in a span with the inline style white-space:nowrap;.

A garden can flourish in the <span style=“white-space:nowrap;”>smallest of spaces</span>.

For support, if we take a look at Campaign Monitor’s CSS page, you can see it’s got pretty good support.

Most importantly it has support where it matters, in almost all the mobile devices (except Outlook iOS app). These devices of varying widths are where widows are most likely to hit the email.

Considering accessibility: as far as I’ve researched there are no issues whatsoever on screen readers when using either non-breaking spaces or CSS no-wrap.

Considering Size Limitations: if you’re in a real tight spot for size limitations, you should use &nbsp;, it simply uses less space than the CSS whitespace solution.

Responsive br

Finally, Alice Li from our Email Geeks Slack has coded a great way to take fine-grain control of widows. This involves using a responsive <br> tag. It works like this:

<style>
  @media only screen and (max-width: 600px) {
    .hide {
      display: none !important;
    }
  }
</style>

You can compare a wide range of life insurance policies on our comparison tables, so you’re <br class="hide">safe if anything&nbsp;happens.

Let’s break that down. What’s happening here is on desktop (anything above 600px) the <br> will act as a normal br and the line will break at that point and the sentence will look exactly like you want it too. It will essentially act like normal text and the &nbsp; isn’t relevant to the desktop experience.

When the email gets below 600px the <br> gets hidden and the text then flows as it normally would in a mobile container: because of the &nbsp; ‘anything happens’ will be kept together.

Wrapping up

To conclude there’s a couple of weapons to dispose of difficult widows and orphans, and which one you use depends on the situation.

If email data size isn’t an issue I personally would go with CSS white-space because it’s more correct in the spirit of HTML & CSS. Conceptually the CSS solution abstracts away the visual styling of the HTML. The non-breaking space adds extra information to the text of the HTML.

That being said, the hiding <br> is a fantastic idea is great to have in your back pocket. I wouldn’t hesitate to break it out to deal with a widow if the email needed it.

Ultimately, like all things in email, test, test, and test again on all devices and see if they all look good. Then test it a few more times. Once you’ve finished testing and make sure everything looks good, then test it all again.

Sean Hinton eats emails for breakfast. His middle name is Inbox. He is co-founder of Milliner.app, a secret project that might be the next big thing in email production.