Fixing Typographic Widows in WordPress

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.

Let me know what you think on Mastodon, or BlueSky (or Twitter X if you must).

WordPress News

The latest WordPress updates from the WPBriefs Podcast.

Related Posts

17 Oct 2012

WordPress Social Network Aggregation

I really like the idea of a Tumblog – and even have one on Tumblr.com – but I don’t promote it anywhere. Conceptually it’s great – but I don’t like not having control over my content.What I would really like...
13 May 2010

6 Tips to Build Better WordPress Themes

If you want to make WordPress themes, for clients, to release for free or to sell, then there are a lot of factors you need to take into consideration. Below are some hints and tips that should help ease your...
13 Jul 2016

Why My WordPress Themes Site Doesn’t Use WordPress

I’ve mentioned it before but I run a WordPress themes site called Pro Theme Design. On it, I sell premium WordPress themes – but I don’t use WordPress to power the site.This probably seems like a strange thing to do...
18 Mar 2010

Realigning James Woodcock dot com

Recently I was talking to my friend, and fellow blogger James Woodcock, about his website and somehow I ended up suggesting I spend an hour or so tidying it up.James is a video game and tech journalist… and an endless...