A simple trick for avoiding widows and orphans in email typography

Dylan Smith

With responsive layouts and varying content, it’s nearly impossible to know where line breaks may occur and impractical to test for in many situations. While some people have given up trying to tame widows and orphans in their email typography, Melissa Lobach offered a solution: adding a non-breaking space between the last two words of a paragraph. This causes the two — or more, if stringing together multiple — words to break to a new line together.

That looks a little something like this.

Nout Boctor-Smith used the technique to connect her company’s two-word company name but decided it wasn’t worth the time to add in less important contexts. She also found that it was unmanageable for organisations doing email at scale with several writers. Melissa’s personal solution was to set up a keyboard shortcut to keep it quick and have it become second nature.

With concerns for accessibility, other suggestions to avoid widows and orphans included HTML’s obsolete <nobr> tag or the more appropriate <span style="white-space: nowrap;">. However, as Alice Li notes, the latter “can cause mayhem with mobile layouts when containers shrink and lines can’t break.”

Dylan Smith is a co-admin of the Email Geeks Slack community and the Design Lead at Taxi for Email, a tool that helps marketing teams make better email.