Why font size and color can break a reading experience

Designing websites with legibility in mind has become more and more widespread. Best practices teach us that not only content and meaning, but also content design and accessibility are important.

To ensure readability is in optimal parameters, web designers should consider the following:

Legibility standards

Your website is intended to reach a great number of people, and thus, your text should be accessible to all of them. Readability matters, and it might decide if users continue to browse your website or leave it instantly. So besides knowing how fonts help your readers, it’s also worth learning how exactly you can change font size and colors in your CMS.

Font Size Choices

Optimal visibility of text fonts

It is recommended that web designers should use fonts of about 16 pixels. However, the extended use of mobile devices seems to impose a new rule: it’s better to use percentage values for font sizes in site. This way, font dimensions will adjust depending on the device the text is read on. There’s no risk a 16 pixels-text will appear too large for a mobile screen, and you’ll avoid any other inconsistencies regarding font size in the website pages.

Better understanding of the text presentation

The use of different font sizes plays an important role in structuring text content. Varying font sizes helps determining the information hierarchy: the most important items will be displayed prominently on web pages and they will attract attention towards central points of the presentation.

In addition to using different font sizes, you can also experiment with various font weights or different colors.

Optimal for scanning

Unlike text on paper (readers tend to read it thoroughly), online text is subject to scanning. People browse web pages, they do not read the content in its entirety, and scroll down searching for nuggets of information.

According to studies, visitors will read between 20% and 28% of the words on the site.

It is known that the difference in letter heights makes scanning easier. It improves readability and it helps getting the message across.

Optimal fonts for readability

It’s become common practice to use sans-serif fonts instead of serif fonts. They give a cleaner look and have more accuracy, which makes the text easier to read.

Most popular sans-serif fonts are Verdana, Helvetica, Open Sans, Roboto, Optima. Any of these can be a safe bet, for text legibility.

Optimal line length for reading ease

If you’ve already decided on the font you’ll use and the font size, it’s recommended you take readability a step further. For this doing, you should make sure you provide an optimal line length to the text on the website pages.

Best practices say that 50 to 60 characters per line should work fine for every web surfer.

Font Color Choices

Like font size, colors also matter for legibility.

Just think of this: it seems that about 8-15% of people have a degree of color blindness. Under these circumstances, you should pay high attention to font colors on your website pages.

One of the best-known practices regarding font colors refers to applying contrast. On a dark background, it’s recommended to use a light font color. Conversely, on a white/light-colored background, you should use a dark font color.

Wrapping up

As a website creator, you should now be aware of two additional elements that improve website readability. As a website visitor, you should now be able to distinguish between an effective and well-designed website, and a poorly-built one.

We hope the information below has made you more aware of what you should take into account, for better readability.