was successfully added to your cart.

Web Design With Two Fonts

By March 7, 2017Websites
Font used in web design

Are two fonts too much for a website? Too little? Here’s what I’ve learned while making websites and messing with different font combinations for several years.

Web Design With Two Fonts: web design for business is a battle between artistic design, usability, and efficiency.

People aren’t on your site because they’re bored. Instead, they are searching for answers to their questions, ideas that inspire or products and service that might help them.

And so if people are coming to your website for stuff, how about:

Making it easy to read!

font pair examples

Some examples of our web designs

Web Design With Two Fonts

Don’t go crazy using several fonts. It creates reader headaches and also makes your life more complicated.

Here’s a fun site to play with font pairs: http://app.fontflame.com/ – Tinder for fonts. Finally, a Tinder that I can play!

tinder for fonts

When several fonts are close to each other, content becomes hard to read. This can leave a bad taste your readers’ mouth. That’s not cool.

And many popular websites use two fonts. Medium, Google. I think BBC even uses just one! Check out their sites and you’ll see how they keep fonts to a minimum to make it easier to read.

Many times you’ll see one font for headlines (usually a more bolder, heavier font) and one font for paragraphs. This makes it easy to read content and gives a chance for headlines to stick out.

Get more creative with two fonts

Using two fonts doesn’t mean you only have two formats available. Uppercase, lowercase, italics, underlining certain words….these are all different styles that you can try.

The point of sticking to two fonts is that it helps with readability. Also, it helps people recognize your website as they become accustomed to your fonts.

It’s like wearing the same clothes over and over…someone will notice.

I can’t, and I must use three fonts.

Well, there’s no font police or anyone stopping you. If you want to use three, I get it. There are lots cool fonts to use.

If you must use more than two fonts, I would suggest this.

Use your most creative font for simple, bold statements on your websites. Original fonts are the hardest to read. And so use them for areas that don’t require many words.

Small headlines like (“today’s special,” “coming up,” “last-minute deal.”)

The creative feel of the font will draw attention to a location while not frustrating the reader to figure out what you’re saying

Font used in web design

Fewer fonts are easier on the eyes. Using less also help with your brand consistency. The more repetitive, the more memorable you become.

Mike Miello

Author Mike Miello

I'm Mike and welcome to our blog. Our mission is to help educators do more online through smart web and mobile actions. Win on Web is what we "dew"!

More posts by Mike Miello

Join the discussion 2 Comments

  • Luis Johnson says:

    Hey Mike,

    Thanks a ton for one of the amazing post. Whether it is acceptable to use two fonts in the same page of a website? I heard that one should design a website with single font all over the site to rank better naturally. Whether using two different fonts will affect the website’s ranking?
    Kindly explain. Many thanks in advance.

    • Mike Miello says:

      Hi Luis, I never heard of fonts affecting site rank. I can imagine if it impacts the user experience, then that can definitely push people away from consuming your content

Leave a Reply

Want a website that is full of excitement?

Watch 10 videos (1-minute each) where I explain design principals that make a website have greater impact

Awesome! Now let's go learn

Transparency matters to us. As required by EU law, we want you to know that we use cookies on our website to try and understand how we can offer better information to our users Learn more

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.