After learning the ins and outs of typography in design school, I started seeing the world through new eyes. Unfortunately, these eyes focus on the imperfections, like a single word on its own line, known as a “widow”. These imperfections are everywhere on the web because type isn’t laid out as carefully as it is in print.
While CSS does have a
widows property, it’s for handling widow lines in column layouts—not words. Because of this, we need to rely on a hack—placing a non-breaking space between the last two words. In the past, I used the
entity, but stopped because of how much it clutters the code. Now, I use an actual non-breaking space character, which can be created with
option+space. This works as long as you have
<meta charset='UTF-8'> in the
I like this approach because it’s clean and easy. The non-breaking space looks like any other space and when used in titles, it even prevents widows in the UI of Siteleaf.
I’m well-aware of the more automated ways of handling widows, like using the