Website Readability Guide: Make Your Website Reader-Friendly

Monday, January 15, 2018

A lot of online ventures offer a really terrible website readability. Considering that almost everything about a website is communicated in text, this is a terrible situation.

These difficult to read websites have followed a bad design model. Digital publications need to be able to compete with printed ones in terms of readability.

After all, a website can be instantaneously delivered or accessed almost anywhere, involves far less time and money to produce, and can have a much narrower niche while still making a profit.

Quality is a major issue, however, and a bad reading experience causes many people to stick with print as their main form of reading information.

Readability in web design is not doomed, however. It just requires careful, deliberate design choices that require surprisingly little effort.

Why Are There So Many Issues with Website Readability?

Many web designers have not been focused on readability the way they should. A part of this is that the old models of design worked well with how websites were used not that long ago, but they don’t work so well on the current web.

This old way of designing a site worked very well to make sure elements like header, navigation bars, footers, sidebars, links, and ads worked and behaved consistently. Content often got shoved aside and wasn’t often treated as a priority.

Newer methods of web design have made it much easier to swap out those previously finicky elements and fix them, so now web designers can focus on the true purpose of most websites: content.

The key to getting in the right mindset to maximize website readability is to use the same mindset used for print formatting: design for readability first. Content should not be an afterthought. Once you get into this way of thinking, it can guide you along through the rest of the principles of website readability.

Use Your Font Sizes Wisely

Font size is very important to the readability of a website. A large font is essentially a giant “look at me” sign and should be used for text that’s very important. A small font is generally less important and should be used for less crucial information.

Font size should also be used to differentiate between sections on a page. For instance, include a very large headline for the page title, then larger sub-headlines above new sections of regular sized text. You should not use more than three different font sizes for the page (or the whole site, either).

There might be times and occasions when you have to make exceptions, but it’s a solid general rule. This rule also only applies to the main body of your website, not additional elements like ads, labels, superscript, subscript, and other items.

What should you use, Serif or Sans Serif?

Sans Serif should be your go-to for your body copy. It is often more readable.

Serif Fonts

Serif font is the traditional font, used for hundreds of years. It looks more old fashioned and has a slightly more elaborate touch.

The serifs of Serif fonts are the flowing marks at the points of the letters. These serifs lead the eye to the next letter, but it only works in high resolution. At low resolutions, this additional complexity actually makes the text less clear.

Sans Serif Fonts

Sans Serif literally means ‘without serif’. This font is much simpler and much more simplistic. They work better at low resolutions because of this. A lot of these fonts have been created to be used in display and on electronics.

The most readable Sans Serif fonts are broad, with a lot of space between letters to help their web readability. There are lots of sans serif fonts that you can use for your body text. Use a broad, spacious font that allows for each letter to be read easily at any resolution.

Use Just The Fonts You Need

Fonts lend personality to a page. However, throwing in too many different kinds of fonts can quickly grow confusing for a viewer.

It can make the page seem schizophrenic. Pick one or two fonts and use just those.

Also, the eye simply will not track that many different fonts that well. Some simply do not look good together. Try to avoid using more than three typefaces on a single page.

Draw attention to certain words

Draw attention to certain words or elements through adjusting styles before you try changing fonts. Italicize, underline, or bold words. If you’re looking to draw attention to a whole section, you might want to use a colored background.

Overusing any of these elements will do the opposite of what you want, making the reading experience bland and also making it difficult for a viewer to read.

Bold will increase contrast, which will only work when it has something to contrast against. Italics are good for emphasizing words or short phrases.

Don’t use italics for blocks of text, otherwise, they will reduce overall readability. Underlining works similarly, but you should double make sure that the underline isn’t mistaken for your site’s hyperlinks.

You might want to have the hyperlinks in another color to make the difference clear. Blue is the most recognizable, traditional choice.

Readability Guidelines

Use simple, plain words. Avoid fancier words and made-up terms.
Use short sentences. Avoid convolution and compound sentences.
Stay in the active voice as much as possible.
If you’re aiming at a broad audience, your target is an 8^th-grade reading level.
For smaller, more highly educated audience, you should still try to keep the reading level fairly low, around a 12^th-grade reading level.

Testing Readability

You can find a lot of readability calculators without too much effort. There is one built into Microsoft Word that utilizes the Flesch-Kincaid system.

You can find it under Review > Spelling & Grammar for some versions, while others have it under File > Options > Proofing. There’s also a readability formula called the Fry score, which is preferred by many people. Do some research and see what helps you create a more readable website.