Website Readability & Typography: Best Practices for Web Designers

Things You Should Know to Improve Readability Of Your Website

It is ironic that while more than 90% of online information is written text, yet the majority of people today do not enjoy reading and find it tedious. This means that in order to get a message across effectively, web designers need to optimize your text so as to make reading what you have to say as painless as possible, while maintaining your site’s overall aesthetic and brand voice. This means that your readability is as important as the message itself, if not more so, if you want to grab people’s attention and keep them hanging on every word.

Think about the last time you read through a magazine or book. You probably took your time going over every page, absorbing each and every word on every line of the page, getting a full picture of what was happening before turning the page. Studies show that online, we behave quite differently. We tend to scan quickly over web copy, cherry-picking the relevant facts that stand out the most; around a quarter of your website’s copy will actually get read properly. So how do you lay your message out in a way that gets the facts across well and leaves a lasting impression on your reader? That’s where good typography and readability practices come into play, designed to give your readers the best user experience possible and help you communicate your message optimally.

Establish a Layout Style with a Clear Hierarchy

The first thing you need to do when laying out your copy is to have a clear outline of main headings, subheadings, and bullet points, with a clear size differentiation that shows how everything fits in. This not only makes the content visually appealing, it helps the reader keep track of what they are reading, and allows them to easily navigate to the section most relevant to what they are looking for. It also provides balance, and gives the reader a format they are used to, so doesn’t require additional effort for them.

Use Subheadings Strategically

Another reason that subheadings and their hierarchy are so important, is because of Search Engine Optimization, or SEO. Search engines use spiders to crawl through your sitemap, which reads your H1, H2 and H3 tags for keywords to analyse your pages relevance for search listings. As the success of your site hinges on traffic, much of which is reliant on search results, this is something that you have to keep in mind at all times.

Keep Lines & Paragraphs Short for Easy Scanning

Statistics show that readers prefer consuming text content in shorter bite-sized chunks of 45 – 72 characters at a time online, so aim to have text wrap around here. Keeping points in short paragraphs between 6 and 8 lines long helps readers absorb the information easily and prevents them from getting bored and moving on by keeping an even, easy pace. Good spacing also relieves strain on their eyes, as gadgets are more physically draining than books. Be mindful of the way you lay out headings, charts, and images and the way that you use space to group sections together, as sometimes a connection can be implied when it wasn’t intended – balance is key.

Using Graphics & Charts Gives Your Readers a Better UX

Your readers are accustomed to being constantly bombarded with data, and brands vying for their attention. While they want to have access to information, they want it to be a convenient experience – and the competition is stiff, meaning their expectations are growing and patience is decreasing all the time. Breaking the text up with visually appealing graphics and images that minimize the strain on the eye, by giving them gaps to rest. Graphics are also a handy way to illustrate a point in a way that leaves its mark on the reader.

The Emphasis on Font Choice for Readability & UX

When it comes to typography, font choice is by far the web designer’s most important aspect of readability and creating a seamless user experience for your viewer. This is not only the case online, but with any written document really. While new web technology has given developers more design choices when it comes to fonts and how they are represented, this has also resulted in a lot of experimental style choices which have had detrimental effects on the content of the sites implementing them. Sometimes creativity needs to be reined in at the expense of practicality – and effectiveness.

Be Sure To Steer Clear of Italics & Fancy Fonts

While italics have been used traditionally for decades to put emphasis on text, this is a practice best avoided in web context today. Not only are they more difficult to read on digital screens, they are particular hard on dyslexic readers who find them more difficult than standard text. If you want to highlight a point in your text, rather opt to bold it. When it comes to selecting fonts for your body, always opt for clean simple fonts which have clear spaces between each letter, for easy scanning. Stay away from curly fonts or curved or slanted angles, as these are even more tricky on the eyes than italics and can really slow the reader down and give them a bad user experience.

Those are the fonts to avoid, so what should you use? For your headings, make sure they are easy to scan and not very long, and feel free to stretch your creative legs a little bit here, provided the text is still concise and visually pleasing, whether you are using lowercase or uppercase. When it comes to the main body copy, you should use very clear fonts, sans serif being the most highly recommended, and old fashioned serif fonts like Times New Roman, which look great on text but are very tedious on the eyes, are left avoided – except for in the case of headings. Examples of fonts which are the most universally recognized across most platforms and are very easy to scan on devices would be Lucida Sans, Helvetica, Verdana and Arial.

Size Does Matter & Bigger is Better

Generally, the standard size of body font has increased steadily recently, due to the changes in the types of devices and screens we now use to view content. To be viewed well across the boards, a body size of 16px is now recommended. When it comes the heading sizes, things get a little bit more complicated. Your H2 heading needs to really stand out in order to get maximum attention, and your H3 and H4 should still be bigger than your paragraph text, with enough leeway left in case you need to use H5 or H6 at some point. Remember to also make your headings’ font contrast from your main text in some stylistic way; either by using a different font or by bolding it or adjusting the spacing or case.

Test Until You Get The Colour Contrast Right

As if size, shape, and the space between isn’t enough to consider, color is another vital typography aspect that affect readability that can send viewers running in an instant if it is not pulled off correctly. You need to have a nice contrast between your headings and copy as well as the background and color scheme of your site, but the contrast can’t be so bright that it makes reading difficult. For example, while very dark backgrounds provide a lot of contrast, they also look claustrophobic, and can hurt the eyes if paired with bright colors such as yellow. Be mindful of this when using images as backgrounds as the range of color can make choosing one font color to suit them all rather difficult. This is why many sites use a layer of transparent grey beneath text sections to allow the copy to stand out.

Your Web Copy Must Be Mobile Responsive

Responsive design refers to text which adapts to the device and browser in which it is being viewed, in order to provide the best reading experience for the viewer. With the massive movement toward cellular use, having text content which is universally accessible is more important than ever, as people want to be able to access the information they need anytime, any place.

Conclusion

It is the responsibility of web designers to create a good user experience for users, in order to communicate a message well, express a brand’s voice, and win consumer loyalty. Since most communication is done via text, then optimizing the typography for readability is as vital a part of UX design as the functionality of the website itself. While conveying your message important, it is also important to remember not to waste your user’s time, as they will resent you for it. Using sound typography practices will ensure that your readers can painlessly scan through your content, and feel comfortable coming back to you in future for information.