Responsive Designs: Making Your Typography Work

Nobody could have predicted how the revolution in ownership of mobile phones would change how we communicate with each other. In the same way nobody could have predicted just how popular the iPhone would become, and how smartphones were to become the norm for cell phone owners, and how much this would influence online commerce.

What influence?

Well the massive changes in how typography is handled by smartphones was the first step, and once responsive designs became popular it then affected the design of any website; those who weren't willing to create responsive websites are doomed to become extinct, especially now with the new Google algorithm. The one-size-fits-all advice of "small text for small screen and big text for big screens" simply doesn't work in the real world either.

The Human Element

Reading is one of those skills most people in developed worlds take for granted, simply because we learned to read at such a young age; it's something we can do without even thinking about it. In the world of digital text and visitor engagement it's important to remember that everyone reads text a little bit differently.

Skimmers

This type of reader will quickly scan through text, looking for key words or phrases which catch their attention. If the text onscreen is intelligible they immediately switch off and find a site with better typography.

Focused

These visitors will read text on your screen in "chunks", gathering what they need from the first few sentences of a paragraph, to decide if they're going to stay on your page or not. If you can't engage them fully you'll lose them in under 15-seconds.

Fully Engaged

This is the ideal visitor - a person who has found your content by deliberately searching for it, and has every intention of sitting there and absorbing every single word of it.

Line Length

As I mentioned earlier on - it's important to get your typography pretty much perfect from the outset, and one of the key choices to make is how many characters you'll display on each line of text.

If you display too few it will take visitors forever to read your content, but if you choose too many the screen will appear crowded, cluttered and will drive visitors away in droves.

The industry standard measure of how many characters you should display on each line is between 45 and 75, although this will vary depending on the type of reader you're dealing with and the complexity of the content your sites contains.

In the same way that reading "run on" sentences can be very confusing and tiring, long horizontal lines of text on a website will lose their impact after about 65 characters. In fact if you look at the length of tags Google suggest you max them out at 65 characters, and there's a good reason for them saying that! The most common explanation of why the character limit in a line of text matters so much is that people wind up reading the same line twice â?? kind of like a reading loop they can't escape from.

Font Sizes

This might seem like the most straightforward element of web typography, but it's also the one people most often get wrong. When designing a responsive website you need to display a font that's easy for a visitor to read without having to pinch the screen to enlarge it.

Always, always make sure your text is fully responsive, avoiding using static font sizes or measurements completely. Basically you need to ensure that your text is displayed in a font which is readable regardless of the size of the device you're optimizing it for. Too small is a bad design choice, but too big is just as poor a choice too.

Line Height

Less is usually more with everything in design except when it comes to line height. There's nothing worse than coming across a site with content you really want to read, only to find that they're using a fixed line height, so the text is all mashed together.

Horizontal lines of text do need some separation between them to make them legible, and the accepted line height amongst most web typographers is roughly 150% of your font size. Just remember that you can't accept 150% line height as an absolute, it needs to tie in with your line length and your typography plan overall.

Getting the typography right in a responsive design is something which is going to take time and effort. It's worth getting it down to a fine art though - your clients will be very grateful as a result!

Learn more about responsive design from our FREE eBook. You'll find very valuable practical advice inside.