Using progressive enhancement to help improve your website’s look and feel
Those that know me well know that I absolutely love typography. If they’ve been unlucky enough to work with me, they’ll tell you that I get obsessive about stuff like orphans and widows. I had, however conceded that it was too difficult to completely prevent them in responsive web design, so learned to ignore them — mostly, anyway.
This was until I started working for a very traditional agency.
The boss there was a very oldschool, classic designer, who by his own admission, didn’t get the shortcomings of the web when implementing design. He also got upset about orphans and widows, and like me, was very vocal about it.
This made me decide for a bit of fun, to play around with an idea one evening. This was to use
characters to prevent orphans. I actually ended up baking the plugin I wrote that night into the now-ageing front-end framework I built: Stalfos.
The idea with TypeMate is to give developers a little plugin that packs a punch. It’s only 1.2kb (655 bytes gzipped), so it shouldn’t make much of a footprint. It also only affects
<p> elements by default, so it shouldn’t be too disruptive either.
So what are orphans?
I’m sure it comes as no surprise to you that the definition differs depending on who you ask. People will dispute it until they die too, I imagine… For the interest of keeping this article slim though, we’re going with the definition that says that an orphan is a word that hangs off the end of a paragraph in a solitary fashion.
As you can see, it leaves a whopping amount of white-space, which can really affect the user’s reading experience. TypeMate fixes this by stiching the last two words of a paragraph together which stops this from happening.
Now, this isn’t perfect, but it’s better. We don’t have the ability to artwork our pages to pixel precision in responsive web design, but we can make little tweaks like this to make things a bit slicker and polished.
How does TypeMate work then?
Basically, it finds all the configured elements (
<p> by default) and stitches the last two words together with an
Using some of the newer tools that ES6 gives us, like spread operators and
The TypeMate plugin in action
Here’s a CodePen project with the plugin in action. I’ve copied the source of TypeMate into a “fake”
node_modules folder, so you can see an accurate enough implementation.
The little switch at the top will turn it on and off, so you can see the effect on both the article heading and its paragraphs.
I hope TypeMate and this little post help you improve your typography work long-term. Give me a shout on Twitter if they do. I’d love to see how TypeMate has helped you :)
You can also get involved in the GitHub repo. It’d be awesome if TypeMate ends up being a really useful tool for developers. Any help to achieve that will always be appreciated. You could start by giving it a little star 😘