How To Choose Your Complimentary Fonts For Web Design

[et_pb_section fb_built=”1″ _builder_version=”3.27.4″ global_module=”587″ saved_tabs=”all” fb_built=”1″ _i=”0″ _address=”0″][et_pb_row _builder_version=”3.29.2″ _i=”0″ _address=”0.0″][et_pb_column type=”4_4″ _builder_version=”3.27.4″ _i=”0″ _address=”0.0.0″][et_pb_text _builder_version=”3.29.2″ text_font=”Raleway|600|||||||” header_font=”Raleway|900|||||||” hover_enabled=”0″ _i=”0″ _address=”0.0.0.0″]

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:

 

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ _builder_version=”3.27.4″ custom_padding=”0px|||||” _i=”1″ _address=”0.1″][et_pb_column type=”1_3″ _builder_version=”3.27.4″ _i=”0″ _address=”0.1.0″][et_pb_text _builder_version=”3.27.4″ text_font=”Roboto Slab||||||||” text_font_size=”16px” header_font=”Raleway|700|||||||” header_2_font=”Raleway|700|||||||” header_2_font_size=”30px” _i=”0″ _address=”0.1.0.0″]

Raleway

Roboto Slab

[/et_pb_text][et_pb_text _builder_version=”3.27.4″ text_font=”Open Sans||||||||” text_font_size=”16px” text_line_height=”0.5em” header_font=”Raleway|700|||||||” header_line_height=”0.5em” header_2_font=”Spirax|700|||||||” header_2_font_size=”46px” header_2_line_height=”0.9em” _i=”1″ _address=”0.1.0.1″]

Spirax

Open Sans

[/et_pb_text][et_pb_text _builder_version=”3.27.4″ text_font=”Source Sans Pro||||||||” text_font_size=”16px” text_line_height=”1em” header_font=”Raleway|700||on|||||” header_line_height=”0.5em” header_2_font=”Oswald|700||on|||||” header_2_font_size=”46px” header_2_line_height=”0.6em” _i=”2″ _address=”0.1.0.2″]

Oswald

Source Sans Pro

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.27.4″ _i=”1″ _address=”0.1.1″][et_pb_text _builder_version=”3.27.4″ text_font=”Merriweather Sans||||||||” text_font_size=”16px” header_font=”Raleway|700|||||||” header_2_font=”Montserrat||||||||” header_2_font_size=”30px” _i=”0″ _address=”0.1.1.0″]

Montserrat

Merriweather Sans

[/et_pb_text][et_pb_text _builder_version=”3.27.4″ text_font=”Arimo||||||||” text_font_size=”18px” text_line_height=”1.1em” header_font=”Raleway|700|||||||” header_2_font=”Pacifico||||||||” header_2_font_size=”37px” header_2_line_height=”1.1em” _i=”1″ _address=”0.1.1.1″]

Pacifico

Arimo

[/et_pb_text][et_pb_text _builder_version=”3.27.4″ text_font=”Montserrat||||||||” text_font_size=”16px” header_font=”Raleway|700|||||||” header_2_font=”Libre Baskerville||||||||” header_2_font_size=”30px” _i=”2″ _address=”0.1.1.2″]

Libre Baskerville

Montserrat

[/et_pb_text][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.27.4″ _i=”2″ _address=”0.1.2″][et_pb_text _builder_version=”3.27.4″ text_font=”Josefin Sans||||||||” text_font_size=”16px” header_font=”Dancing Script||||||||” header_2_font=”Dancing Script|700|||||||” header_2_font_size=”40px” header_2_line_height=”0.5em” _i=”0″ _address=”0.1.2.0″]

Dancing Script

Josefin Sans

[/et_pb_text][et_pb_text _builder_version=”3.27.4″ text_font=”Ubuntu||||||||” text_font_size=”16px” header_font=”Dancing Script||||||||” header_2_font=”Abel|||on|||||” header_2_font_size=”45px” header_2_letter_spacing=”1px” _i=”1″ _address=”0.1.2.1″]

Abel

Ubuntu

[/et_pb_text][et_pb_text _builder_version=”3.27.4″ text_font=”Nunito Sans||||||||” text_font_size=”16px” header_font=”Sacramento||||||||” header_2_font=”Sacramento|700|||||||” header_2_font_size=”76px” header_2_line_height=”0.2em” _i=”2″ _address=”0.1.2.2″]

Sacramento

Nunito Sans

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”3.27.4″ custom_padding=”0px|||||” fb_built=”1″ _i=”1″ _address=”1″][et_pb_row _builder_version=”3.27.4″ _i=”0″ _address=”1.0″][et_pb_column type=”4_4″ _builder_version=”3.27.4″ _i=”0″ _address=”1.0.0″][et_pb_text _builder_version=”3.27.4″ _i=”0″ _address=”1.0.0.0″]

And when at a loss for what to do, check out Pinterest for inspiration!

Cool tools to help you choose your complimentary fonts for web design:

www.font-combinator.com

https://www.canva.com/font-combinations/

[/et_pb_text][et_pb_text _builder_version=”3.27.4″ _i=”1″ _address=”1.0.0.1″]

Follow Firefly Web Studio

[/et_pb_text][et_pb_social_media_follow icon_color=”#ffffff” use_icon_font_size=”on” icon_font_size=”32px” _builder_version=”3.27.4″ background_color=”rgba(0,0,0,0)” custom_button=”on” text_orientation=”center” border_radii=”on|25px|25px|25px|25px” _i=”2″ _address=”1.0.0.2″][et_pb_social_media_follow_network social_network=”facebook” url=”https://www.facebook.com/fireflywebstudio” _builder_version=”3.27.4″ background_color=”#fcd21d” background_enable_color=”on” follow_button=”off” url_new_window=”on” _i=”0″ _address=”1.0.0.2.0″]facebook[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”instagram” url=”http://www.instagram.com/fireflywebstudio” _builder_version=”3.27.4″ background_color=”#fcd21d” background_enable_color=”on” follow_button=”off” url_new_window=”on” _i=”1″ _address=”1.0.0.2.1″]instagram[/et_pb_social_media_follow_network][et_pb_social_media_follow_network social_network=”pinterest” url=”http://www.pinterest.com/fireflywebstudio” _builder_version=”3.27.4″ background_color=”#fcd21d” background_enable_color=”on” follow_button=”off” url_new_window=”on” _i=”2″ _address=”1.0.0.2.2″]pinterest[/et_pb_social_media_follow_network][/et_pb_social_media_follow][/et_pb_column][/et_pb_row][/et_pb_section]

Leave a Reply

Your email address will not be published. Required fields are marked *