hi there.

Web Design

20 Font Combinations For Your Website

Share on pinterest
Share on facebook
Share on twitter
Share on email

Choosing a font combination for your website is fairly simple.  There are a few things that go into decision making, but main factor in determining if a font is good to use?  Readability and legibility.  Can people read it… easily?  Here’s great article that distinguishes the difference between readability and legibility. There are thousands upon thousands of fonts to choose from, so how do you decide?  Here are four pretty standard rules to live by when selecting font combinations for your website.

1. Make sure they're readable and legible.

You want visitors to digest your content.  Nothing makes me leave a website faster than font that makes my brain work harder.   I see this a lot with script fonts.  Although they are beautiful, if your visitors can’t read it quickly, they’ll skip right over it, or leave altogether.  

Here’s a quick comparison below.  The first one is called Lato and is the one I use for my body font.   The other two might do well in other applications, but definitely not large sections of text.  Another note: just because you can read a script well doesn’t mean your visitors can.  Try to stick with sans-serif or serif fonts, and make sure to give plenty of spacing to letters and lines.  Tighter text is more difficult to read.

You want to make sure the fonts you choose are readable; meaning visitors can easily and quickly decode letters and words. 

You want to make sure the fonts you choose are readable; meaning visitors can easily and quickly decode letters and words. 

You want to make sure the fonts you choose are readable; meaning visitors can easily and quickly decode letters and words. 

2. No more than 3.

Try to choose no more than 3 fonts.  You can vary weight and sizing, which you’ll do with headings anyway, but stick to just a few actual typefaces.  You don’t want it to become overwhelming.  Keep it simple.

3. Choose complimentary fonts.

Select a font combination that looks good together.  Typically I choose a very simple readable font for the body and another with a little more style and/or weight for headers.  I occasionally add an interesting or crazy font, but only one, and I use it sparingly as an accent.  All of the fonts need to work as a team and not compete with each other.  

4. Select 'on brand' font combinations.

If you’ve had your branding professionally designed, then your designer likely provided you with brand guidelines, which will contain font information.  If you don’t have a brand board, or your logo is a brandmark or something totally custom, then you’ll have to be smart about selecting fonts that pair well.  

A note on custom fonts: Although adding a custom font is possible, I find that sometimes there are browsers that struggle to load them, so I always try to use an available font first. 

Here are some great font combinations that I commonly use when designing sites.  A lot of these fonts are Google Fonts and/or included with Elementor if you happen to use that.  

*If you are using Elementor, these are all fonts that are included.*

20 Font Combinations for Your Website

Poppins

PT Sans

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Josefin Sans

Open Sans

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Playfair Display

Lato

This Is A Heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Libre Baskerville

Noto Serif

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Bebas Neue

Lato

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

ABeeZEE

Open Sans

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Abril Fatface

PT Serif

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Alegreya Sans SC

Fira Sans

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Vidaloka

Lato

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Sanchez

Maven Pro

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Julius Sans One

Encode Sans

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Montserrat

Martel Sans

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Montaga

Lato

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Manrope

Nunito

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Libre Franklin

Open Sans

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Bree Serif

Arial

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Sometimes you can get away with just sticking with one font family and adjusting weight, case, and sizing to make them appear like different fonts, but they aren’t.  I love doing this when a brand and site needs to very clean and simple.  Here’s are a some examples below.  

Open Sans

Open Sans

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

PT Serif

PT Serif

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Roboto

Roboto

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

Nanum Gothic

Nanum Gothic

This is a heading

This is a paragraph.  Choosing a font combination for your website is really important. You want to make sure you choose no more than three fonts that are readable, complimentary, and work well with your existing branding.  

I hope this list was helpful!  Looking for some more resources on this topic?  I found this really great, and thorough, guide on web typography.  The FontPair site also gives a lot of great font combination suggestions.  

Looking for some more great fonts?  Learn where I source all of my fonts.

Hi There.

Hey there! Welcome to the blog. I’m Ashley Hughes, kindergarten teacher turned web and graphic designer.  I love helping educators and creative entrepreneurs build their brand and business.  

Categories

Want to learn how to build the website of your dreams without paying thousands?  Stop piecing together YouTube videos to try and figure it all out.  Let me walk you through everything!  From hosting to launch, I’ll hold your hand the whole way.  

More posts you may enjoy...

ashley

ashley

Jesus lover, wife, mama of 2 toddlers + 3 dogs, graphic and web designer, former elementary teacher, Kentucky girl, and a coffee and wine enthusiast.

Just add your name and email and the WordPress Maintenance checklist will immediately download!   No waiting to check your email!  

Just add your name and email and the checklist will immediately download!   No waiting to check your email!  

Just add your name and email and the form will immediately download!   No waiting to check your email!