Is Bad Typography Making Your Website Unreadable?
I love seeing good typography on the web. At it’s best, well-set type can make paragraphs read effortlessly, making an otherwise fairly typical design something unforgettable. At it’s worst, poor typography can make text difficult to read and create a clunky reading experience.
It can take years for designers to hone the skills and knowledge to set type in a manner that reads beautifully. Typography is a huge subject with lots of variables, but there are lots of easy and minor changes you can make on a website to instantly improve how the text reads.
Do you seriously expect me to care about typography?
Ok, I don’t expect you to go out and buy Sarah Hyndman’s Why Fonts Matter or Ellen Lupton’s Thinking With Type, but there are lots of solid business cases for making sure your copy is easy to read.
In 2015, Jeffrey Zeldman wrote “90 percent of design is typography. And the other 90 percent is whitespace”. Whether you agree with those numbers or not, it’s a good point.
Good typography will increase the likelihood that users will read your content. Not only that, but users are also more likely to actually understand what your content says because it’s easy to digest.
From an accessibility viewpoint, good typography will help to improve the reading experience of users with visual impairments.
All-in-all, making a few improvements to your typography can have a significant positive impact on your website’s user experience. Ultimately, this should result in users engaging with your content in a more meaningful way and increase the number of users that click on calls to action or purchase products.
Where to start?
Below are some of the most common typographical issues that I see on websites. One caveat: these are general rules and therefore can be broken from time-to-time…as long as there’s a good reason!
Set the text’s line-length to be no more than 75 characters wide
Initially this may seem narrow, but it significantly improves the readability of your text. Having to read paragraphs that stretch across the whole width of a web page is no fun. Not sure how long your line length is? Try this Chrome extension.
Don’t centre align paragraphs of text
Large paragraphs of text that are set to be centre-aligned are very hard to read. It’s ok to centre headings and brief descriptions (image captions etc), but alarm bells should be ringing if you’re centring the main copy of your page.
Don’t justify your paragraphs
It’s tempting to want to justify paragraphs to create the perfect columns seen in newspapers and magazines, but this doesn’t translate easily to the web. Unfortunately, justified web text almost always results in text with uneven gaps between words, making it very difficult to read.
Avoid pure white and black
Setting your text to be a dark grey over an off-white background will make for a much more pleasant reading experience than pure black over pure white. The latter can appear to be quite harsh, so get experimenting and adjust your colours when you find a good balance.
Check your contrast
Setting your text and background colours to have a good level of contrast will help to increase legibility. This is especially true for users with visual impairments. The good use is that there’s an online tool to check your text’s contrast levels — no excuses!
Avoid extremely thin body text
There’s a trend to set body copy in extremely light weights, but this can result in illegible text. Choosing a medium weight will help to ensure users can read your text, no matter how it’s rendered.
Don’t letter-space your body text
Websites that have extremely thin body text are often guilty of breaking this rule, too. It makes text hard to read and should generally only be used for uppercase lettering.
Choose a reasonable line-height
It’s common to see websites with extremely wide line-heights. Sticking to something between 1.3 and 1.6 will make your paragraphs much easier to read.
Set font sizing, padding and margins in ems, rems or percentages
Without getting too technical, setting font sizes, padding and margins in pixels (i.e. 16px) will reduce how responsive it is. If users view the text on a different size screen, or use their browser’s settings to increase the base font size, those absolute settings will probably create an uncomfortable reading experience. Using ems, rems and percentages means the font size, padding and margins will all scale proportionately.
Think about your font pairings
Your website doesn’t need to contain more than one font. If it does, try to make sure you pair a serif with a sans-serif (or vice versa) rather than pairing two of the same font families together. This a pretty detailed topic in itself so, if you’re using Google Fonts, try the Font Pair website to get you going.
Position your headings carefully
It’s easy to overlook the positioning of headings in the middle of paragraphs. If you’re not careful, they can easily end up being marooned in the middle of lots of whitespace! Make sure your headings are closer to the paragraph that follows it, rather than the preceding paragraph.
Use actual quotes, rather than ‘dumb’ quotes
I apologise to all readers who are unaware of this, as you will not be able to un-see this from now on. It’s extremely common to see ‘dumb’ or straight quotation marks instead of the actual/curvy quotation marks. Not sure on the difference? ‘Single dumb quotes’, “double dumb quotes”, ‘curvy single quotes’, “double curvy quotes”. It’s a small detail that can really lift your general typography.
Use a typeface with some character
Google Fonts have introduced lots of fantastic free typefaces to the internet. The downside is that you see many of the same typefaces used over and over again, creating reading experiences that are largely forgettable. Raleway, for instance, is a lovely typeface, but I see probably ten times a day. Consider setting your type in a less common font, whether that’s from Google Fonts or another typography. Simply changing your typefaces can help to create much more memorable experiences.
Wrapping up
Typography’s a huge subject and this is only the tip of the iceberg. If you’ve found this guide useful or have any typographical tips that have worked on your website, pop them in the comments below.
Dave Smyth is a freelance web designer based in London. You can follow him on Twitter, Facebook and Instagram. For more of his thoughts on design and freelance things, sign up for his newsletter.
This article originally appeared on his blog.
