DEV Community

Cover image for Mistakes made by web designers
Yusuf Saifurahman
Yusuf Saifurahman

Posted on • Edited on

Mistakes made by web designers

Mistake #1: Fonts that are too small;

The first mistake people make is creating a site with fonts that are too small.

The reason for this is that, back in the day, most websites had small fonts. The standard was somewhere around 12px (9pt), and nearly everyone followed that standard.

But, over time, people started to realize that 12px fonts are hard to read online. When a screen is 24 inches from someone’s face, small fonts make it difficult to read.

People also started to realize that you have only a limited amount of time to get visitors, attention and let them know they’re in the right place. One study even states that the average attention span is 8 seconds, one second less than the average attention span of a goldfish. A similar study states that people read only 28% of the words on an average web page.

In order to get people’s attention right away, you need to do the following:

  1. Compose great headlines that grab readers’ attention.

  2. Write interesting content that will get them to read more than 28% of
    what you’ve written.

  3. Use headline fonts that are big enough to demand attention.

4.Make sure body fonts are large enough to read so readers don’t give up
because they’re tired of squinting.
For all the reasons mentioned above, font sizes have increased over the last few years to the point that many view 16 px as the very minimum font size, and many sites go even bigger with 18 px as a minimum, especially when a lot of reading is involved.

Here are some examples of exceptional web design with great font sizes;

Help Scout Blog

Intro text: 26 px
Body: 19 px

The point to keep in mind is that the purpose of writing copy is to get it read. When you pay a writer good money or painstakingly write website copy yourself, you want to make sure it gets read and doesn’t get hidden by a small font that makes the copy difficult to read.

You also need to remember that not all fonts are the same size. A 16 px Arial font can be smaller than a 16 px version of another font. This is something you need to be aware of when choosing a font size, so you don’t arbitrarily pick 19 px because another site did, only to find out your 19 px version isn’t as big.

Keep in mind that footer fonts can be on the smaller side and so can subtext, but if you’ve written something you want people to read, consider using a 16 px font at a minimum. And, in case you don’t want to take my word for it, Smashing Magazine preaches the same thing in this article: A Reference Guide For Typography In Mobile Web Design.

Pro tip: In order to get a feel for the size font you’d like to use, based on websites you like, download the WhatFont extension for Google Chrome. It’s a Chrome plugin that makes it really easy to click on fonts in order to find out what font type and size a website is using.
Thanks

Top comments (1)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Thanks for the extension tip as well. Yay. the base font size typically is now 16px if anyone wanted to know, for like parties and stuff.