Recommended number of fonts and colors, irritations to remove from your website

(If you're reading the "ultra-short tips" series for the first time, these are the tips I send out every second week to give you a break from the in-depth stuff)

It's sommer. Vacation time.

And that's why today's ultra-short tips come in twos - the third one is on holiday enjoying the sun somewhere close to the ocean.

But we are not on vacation. So 'nuf talking, and let's improve some websites.

#1 Why you should avoid even minor irritations on your website

Do you think your visitors will leave your website if you don't have a "Home" navigation label?

Probably not.

And if you have a drop-down menu?

This is also usually no biggie.

Testimonial carousels?

Slightly annoying, but nah.

But what if you have *all* of those things, plus a couple of other minor annoyances?

Then a large pile of straw on the camel's back is growing, and any additional straw (aka irritation) may break its back very soon.

That's why eliminating even minor annoyances on your website matter. 

Here are some common things that irritate your website visitors:

  • No "Home" navigation label
  • Drop-down menus in the navigation
  • Stuff that moves by itself:
    • Blog, logos and testimonial carousels
    • Uncontrollable animations
    • Too many GIFs
  • Autoplayed audio and video
  • Popups, slide-ups, welcome mats
  • Unclear copy of navigation labels and buttons (so that when your visitors click on a button expecting one thing another thing happens).
  • Social media "share this" icons one can't get rid of that cover a part of the text.
  • A huge lead magnet banner occupying almost all above the fold space for every page (so that when your visitors navigate to another page at first it looks like the one they just came from), etc.

Anything else you think should go on this list? Let me know.

Nothing here affects readability. Your visitors still can see and read your stuff. It's just they get slightly irritated by each of these things till they have enough and leave your website.

#2 How many different fonts and colors should you use on your website?

Some people don't have a website. They have a piece of art.

"A splash of this color. A drop of that color. Out-of-space CTAs. And let's not forget a fancy script font because every modern website needs one!"

Great too look at but totally dysfunktional.

Your. Website. Is. Not. A. Painting.

Sure, your website shouldn't be ugly but, most importantly, your visitors should be able to:

  • easily see what's important
  • read without distractions
  • mentally filter out elements that aren't body text (headings, CTAs).

But what's wrong with using many colors, fonts and font sizes?

Let's look at this example:

Keep colors and fonts to the minimum

See how every different color, font or font size creates friction?

Frictions are good if you want your visitors to pause and pay attention to that friction-causing thing. But they are bad if you need your visitors to read smoothly and absorb the information.

My recommendation is to use:

  • 2 fonts (headings / body text)
  • 4 font sizes (heading / subheading / body text / CTA)
  • 3 colors (headings / body text / CTA)

... while keeping everything readable (i.e. readable fonts, font sizes and colors).

Pro tip: You can use a 3d font - a readable script font for very (very!) short phrases.

***

P.S. Haven't got any tips from me for the last two weeks?

My otherwise wonderful newsletter tool MailerLight has been having some problems with delivering my emails.

Were you looking forward to my tips but didn't get any? Check out the links below to catch up:

***

This would be all from me for the week.

Warm greetings from Germany,

Gill

Gill Andrews