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.