Web design hints and tips: widows and orphans

Coming from a print background widows and orphans are very important to me – you could say i’m quite pedantic about ensuring they are all fixed before sending completed artwork to the printers. However in web design, and especially responsive web design, where the content resizes for the particular device, whether it’s desktop, tablet or mobile how do you ensure widows and orphans don’t appear on all devices?

At this point I should probably point out what are widows and orphans?

There is a saying that goes “An orphan has no past; a widow has no future” Another way to remember the differences is that orphans are younger than widows and so an orphaned line appears first (at the end of sentences), and a widowed line appears last (at the end of paragraphs).

So when it comes to responsive web design you have two options; don’t bother fixing widows and orphans as you can’t control how your pages look on all devices and all browsers or use technology to compensate. The latter will never fix every instance but can do a reasonable job.

So, if you’re like me and want to try to fix widows and orphans, you could try the following:

  • using the min- max-width properties in CSS to control the width of your line
  • using hyphenation and word-break properties in CSS, although not all browsers are supported
  • using tracking properties in CSS to control your letter and word spacing
  • change the font size. If you make the font size smaller or larger, widows and orphans may disappear, but you end up creating more, or
  • editing your content to compensate. You or the content editor can shorten or lengthen copy to minimise the instances of widows and orphans.

Finally I would never recommend manual hyphenation using HTML non-breaking spaces. Whilst your finished page might look fine on your browser, when your end user views the pages they may see odd line breaks appearing mid-paragraph which can look unprofessional.

Following these rules can help to reduce widows and orphans but unfortunately, as i’ve had to discover myself, until there is a universal automated fix your going to just have to live with them. Sorry about that.