Back

How to Choose the Best Fonts for Your Website

November 30, 2020

5 mins

Written by Aanchal

Content is king. But no matter how great your content is, people aren’t going to read your amazing blog posts if it doesn’t look visually appealing. Typography plays a great role in how people interact with your website, newsletters, blogs, etc. Typography is formally defined as the visual representation of the type. Your brand’s typeface must amplify your brand voice, while also looking clean and sharp. Typography goes back to Steve Jobs, also known to be the father of typography. While it doesn’t seem like that big a deal, he created 10 font designs during apple’s early days whilst creating the first Mac. Those 10 designs changed the way designers look at content and was a pioneering moment in design at the time. If it wasn’t for Steve Jobs, you’d be stuck with very primitive typography that would probably make your eyes hurt.

1) Make Sure Your Chosen Font Reflects Your Brand’s Voice, Tone & Aesthetic 

Fonts are an irreplaceable, important part of your brand. If you’re a wedding planner, you’d use a very easy-on-the-eyes, clean, slightly feminine font. No, not giving fonts gender roles. But the idea is, you need to communicate your brand’s voice. The cute femme font would work better than a rugged, thick font you’d see a wildlife conservatory use on their website. It would be odd to find the CRA’s website in comic sans. Similarly, fonts dictate your brand’s tone. Whether you’re cutthroat, professional, or an amateur dodgeball league. Your fonts dictate who you are.  

PRO TIP: Avoid tacky, loud fonts. Loud fonts can sometimes be unreadable and cluttered. Plus, they do not offer any versatility.

2) Know Your Font Classification

Typography is not just limited to how content looks like. It extends to text alignment, spacing, contrast, consistency, color, and hierarchy. With so many aspects in mind, it can be a bit overwhelming to decide where to start. So here’s step numero uno: Pick between the three main classifications of type:

  • Serif: Serif fonts are those font types that include a small line at the end of a stroke in a letter or symbol. Times New Roman, Georgia, and Merriweather and examples of serif fonts. These fonts are found commonly in print media. They are formal and old school.
  • Sans Serif: These font types are quite minimal in nature and do not have a small line at the end of the stroke. These fonts are clean, edgy, and modern. Their popularity skyrocketed as people soon came to realize that it is the best fit for web design. Calibri, Arial, Nunito, Roboto are a few examples of sans serif fonts.
  • Script: Script fonts almost look like freehand writing. They were made to mimic cursive techniques to give you a very feminine, whirly aesthetic. We wouldn’t recommend using script fonts in chunks of text, but rather just for titles. Pacifico, Caveat, Lobster, and Lucida are examples of script fonts. Use them very carefully.

3) Choose Complementary Fonts for Your Font Hierarchy

Never use more than three fonts on your website. When you pick out these fonts, create a hierarchy, and allot different levels of importance to each font. This allows for a clear sense of hierarchy, giving you a primary font, a secondary font, and an optional accent font.

Your primary font will be your star. It is the most visible one and should be used on the headers, titles, and maybe the logo of your website. This font will be the visual representation of your brand, despite it not being used throughout the site. But this allows the primary font to be more distinct than the rest of the fonts on your website.

Your secondary font will be used for all things content, including paragraphs, descriptions, blog articles, newsletters, reviews, and more. Since your primary font is the unique eye-catcher, your secondary font serves to be your highly legible font type. Fonts that are too chunky, twirly, and ornate are harder to read when applied over paragraphs of content.

And finally, your accent font will be used for one very specific purpose. It will be reserved for calls-to-action, drawing the eye to your most important, make or break button on the page. Your logo font can be the same as an accent font too.

4) Yes, White Space Can Make Your Content Look Good

White space is formally defined as an empty area between two design elements. These design elements can be buttons, panels, images, text, etc. So sit a little further away from your screen and go through each of your pages and think about where you can add a bit more space. This goes a long way. If you have an extremely comprehensive blog, a good amount of white space can make it more readable as opposed to stuffing as much text as you can in one space. Now, if your content still looks super hard to read despite you picking the best fonts, rest assured there’s a solution; margins. By creating a slightly wider margin between columns of texts, helps make the page seem less cluttered.

Make sure there is a little bit of extra space between headlines and subtitles, paragraphs, and images and a paragraph. It can make your webpage look a lot cleaner.

Using more white space is an easy, low effort high reward technique that instantly improves your visitors’ user experience.

5) Choquer Creative’s Picks for Best Fonts

We’re always striving to find what suits our clients’ needs with our comprehensive website analyses. One of our favourite things is typography and hence, we’ve selected a few fonts worth mentioning.

Get The Choquer Blog Straight to Your Email

Stay up to date with the latest web development, industry leaders, along with service tips and news.

Check your email inbox, it will arrive soon
Oops! Something went wrong while submitting the form.