Typography on websites is hard – especially if that site is powered by a CMS such as WordPress. Making the text on a site look good when the screen size, or content, can be changed means that often you have to give up control and understand that it will never be perfect. One such thing that can be a bug bear for many is typographic widows.
In typography widows are words at the end of a sentence or paragraph that sit on their own line. They create large amounts of whitespace between themselves and the following paragraphs – and this can unbalance a design. A common place his happens in WordPress is on blog post titles. The last word of a title can break onto it’s own line – and then the content starts to look fussy. In a printed book you can often tweak the content slightly to fix the issue – but that’s not realistic on a website. Whilst you could tweak the content – there is no guarantee that it would still look good on a different size screen.
There’s also such a thing as an orphan. Widows and orphans are slightly different things – but both are about text formatting. On the web we don’t need to worry about Orphans very often – however I have found a number of websites that swap the meaning of widows and orphans. I’m not sure why this is – but it’s worth being aware of.
I recently came across this problem in a theme I am working on. The site description is displayed with a large font and one word was being placed on a second line. I wanted to fix this.
PHP to the rescue
The answer is to use a simple PHP function to add a non breaking space into the last space in the text. This means that the last two words will be treated as a single word and so sit on the second line together.
I used the following function:
In my theme I used it like so:
echo theme_widont( $description );
However you could also add it as a filter to automatically filter common elements. For example to filter post titles you could use:
add_filter( 'the_title', 'theme_widont' );
And all my typographic woes vanish… well – one of them at least.
Was it good/ useful/ a load of old rubbish? Let me know on Mastodon, or BlueSky (or Twitter X if you must).
Link to this page
Thanks for reading. I'd really appreciate it if you'd link to this page if you mention it in your newsletter or on your blog.