How To Choose Your Complimentary Fonts For Web Design

You’re building a new website, picked out your perfect color scheme, and now it’s time to choose which complimentary fonts you’d like to use in your new design. If you’re like most business owners, you have one very important question… where do I even start? Some people head straight to Pinterest, others to Google Fonts. Personally, I recommend reading this blog post about choosing complimentary fonts for web design first and THEN heading over to one of those sites. 

Fonts 101: What Should I Know? 

Serif vs Sans Serif:

• Serif fonts are fonts that have a small line attached to the end of the stroke
• Sans Serif fonts are fonts without that extra stroke or embellishment. They tend to be easier to read
• When in doubt, we recommend a sans serif heading font and a serif body font

Contrast: 

When choosing a font, it should have a purpose and that purpose make it’s easy for readers to tell the difference between different parts of your website (headers vs copy). If fonts look two different, it can be over stimulating to readers, however if they’re too similar, it can be quite boring.

You can add contrast by considering things like: 

• The font weight: Perhaps when choosing complimentary fonts for your website you could consider one that is thin/light and one that is bold.
• Point size: Headers tend to be on the larger size (24-36pt) where as paragraph text is usually around 16pt
• Styles: A script font or blocky font is going to be best paired with a simple font.

Mood Consistency:

• When choosing your fonts, don’t forget to consider what mood you are trying to set. If you’re a web developer, you will want a modern, professional font however if you own a childcare business, something more whimsical would be appropriate.
• You also want to make sure that the fonts you choose both set the same mood. A serious font paired with a playful one is more likely to take away from your message.

Readability:

• I don’t know about you but if I go to a website and I can’t read the font, I move on. My time is precious, too precious to be spent trying to figure out what it is that a website is trying to tell me.

When all else fails, go with your gut. If something intuitively doesn’t feel right, trust that and find another option.

How many fonts should I use when designing my website?

Two complimentary fonts, three max. More than that distracts from your message. This is one of those times when keeping it simple really pays off. And remember, you can always add bold or italic to mix things up

Examples of popular font combinations for websites: