Widows On The Web

In typesetting terms, a widow is a single word, or a short line, left alone at the end of a heading or paragraph. The counterpart, the orphan, is a single line left on the following column or page after a paragraph. Both mess with reading rhythm, if a heading ends with one word, your eye stops just before the body copy, reducing the impact. If the heading is the first or only thing someone reads, it matters that much more.

Issue at hand

While exploring EVO & Refero website, we've stumbled upon following issue. The container did not have enought space forcing the heading to break in two lines, leaving one word all alone on a new line.

Three fixes for widows

As we know, a problem must have a solution, so let's take a look at three solutions we have on the table, in order from quick to real fix:

Insert a line break tag.

The most obvious fix is inserting a line break tag before the last two words, thus having not one but two words on the new line (all the time), which does not qualify as a widow anymore, so yeah... problem solved! However, you've hidden the problem without addressing what caused it, and the moment the layout shifts (responsive breakpoints, font size changes, translations), the issue worsens to the point where even if the last two words could fit on the previous line they must go on the new one.

<div>
  <h1 classname="...">Semnătura ta - acces la identitatea&nbsp; ta.</h1>
</div>

CSS to the rescue.

This property will evenly distribute the text based on the number of words, and the width of the div, and subsequently fix the orphan. Text-wrap: balance is suitable for headings while text-wrap: pretty is the ideal property for paragraphs as it’s more subtle than balance and prevents widows without significant over-balancing. It's a good fix that takes minimal effort but still requires manual checking. On the example above my immediate instinct was to open DevTools and fix the heading by applying:

<div>
  <h1 classname="... text-balance">Semnătura ta - acces la identitatea ta.</h1>
</div>

Design for real content

Widows are most often a design issue, not a copy issue. They appear because a container was created before the actual headline was considered. If the design process starts with the content itself, these errors are easily caught early. Typography is the silent architecture of information and when done right, nobody notices. When it's off, however, something just doesn’t feel quite right. It’s definitely worth fixing.

Reflection

Sometimes we tend to pay more attention to a misaligned pixel and miss a widow that shifts the page down by a larger margin. Content is the most important piece of information we want to deliver to our users. We need to make sure the final user/customer understands exactly what we want to say, and exactly how we want to say it.