Top Tips for Readable TextNovember 11, 2017 • Accessibility Guide
Do you secretly kind of hate your audience? Do you want to make them uncomfortable while they consume your content? Do you want to mess with their heads in small ways so they won’t even be able to pinpoint exactly how you are harming them? If so, typography is a good way to do that! Or should I say, bad typography is a good way to do that?
They say “good typography is invisible; bad typography is everywhere” and nowhere is this phrase truer than on the Internet. Conventions can be boring, and I’ve seen countless ways that non-designers have tried to jazz up their blocks of text and broken some basic accessibility rules in the process. (We’re mainly talking paragraphs here. You can be more creative with headings, generally speaking.)
If you’re doing (or not doing) one or more of the points below, you might actually be causing your audience to work harder to consume your content. They might be associating your content (and therefore your brand) with this feeling of discomfort. And we don’t want that! So here are some top tips for readable text.
Do not allow text to be too wide
You know when you’re reading a very long, drawn-out, lengthy, extended, prolonged sentence full of twists, turns, thingamabobs, and two minutes later you finally reach the well-deserved end but can barely remember what was said in the first part of the sentence?
That’s how most people feel when they’re forced to read text that is too wide. For example, online some people choose to make their blog posts take up the full width of the screen. This is preferred on mobile, and fine until about the 1000px wide mark. Anything wider than that, however, and you’re going to make a large chunk of your audience slightly uncomfortable. And many more of them won’t actually be able to properly process the content you’ve written.
Beyond this, people with learning difficulties, like dyslexia, will find your content nearly impossible to digest.
In short, there is a reason why we stopped publishing written works in epic tomes, and why it’s much nicer to read a paperback novel. Newspaper columns are a great example of how shorter lines can make content easier to scan and process. When choosing widths for main bodies of text think of these sorts of printed mediums.
Never centre bodies of text
I know it can be tempting. You see the little icons in the toolbar of your editor and you just want to push them. But think about how the language you’re writing in works first. English is meant to be read from left to right, so that is the user experience that people expect when reading long-form texts. You always want eye movement to be fluid and as limited as possible, meaning not putting your audience into situations where they’re reading something here
but then it jumps over here
and back here
and then here!
At the same time, you don’t want to completely centre or right align (in LTR languages) your text because the edges will not match, which, similar to with wide bodies of text, makes text difficult to scan.
If you get into a rhythm while reading text, your eyes will know where to go when they reach the end of one line, because every new line starts in the same place. But with non-left-aligned text, either the left or both edges will be ragged which makes it hard to scan, read and process.
Again, this is for bodies of paragraph text. Headings can look interesting centred and don’t really require as much precision to read, so you can be a bit more creative.
Give your text space to breathe
A lot of text by default online has little to no line space. But this can be crucial in ensuring your text is legible, easy to scan and… well, attractive. It can be a bit tricky though. No line height usually results in cramped text, which makes it hard to find the next line when reading. Too much line height will have your audience lost in the gaps in a similar way. I find setting line height around 150-170% of my font’s size to be ideal.
Pay attention to size and contrast
Probably the most important thing to pay attention to with your text is size and contrast. There was a trend around ten years ago for websites to have the world’s tiniest text. Many sites were barely legible, and it’s a miracle we dug ourselves out of that and continued to grow an ecosystem of content. One thing that helped was the innovation of browsers which allow you to scale your text as needed. But it’s still a good idea to start off with text that most people will find accessible.
The obvious is to not make your text too small, but equally, it can be difficult to read paragraphs if they’re giant as well. Again, take cues from novels. Standard text on the web tends to be around the 16px mark – that’s the default most browsers use!
As for contrast, always make sure the difference between your background and your text is stark, but not too stark. You may think the default black on white is your best bet, but actually, it can be a bit too much contrast, which is why many people opt for a very dark grey (think #333) on a very light grey (like #eee).
Of course, there are a lot of nuances to good typography and they can take a lot of time and effort to learn. But following these basic tips will at least get you on the path of displaying your content in a way that is accessible to most. Your audience will appreciate consuming your content in a way that doesn’t cause them subconscious discomfort.