How to Choose the Best Fonts for Your Website

When creating a website there is a lot to think about.  From writing your content and choosing the perfect visuals, colour scheme and branding.  But many companies forget the importance of the font they use.

The difference between font and typeface

Typefaces refers to the name of a style such as Helvetica, Open Sans, Times New Roman, Arial, or one of my favourites Montserrat.

Fonts refer to the nuts and bolts of the typeface, the weight, size, style, and effects used within the typeface such as italic, underlined, capitals etc.

Using a typeface of Helvetica would give you over 50 different fonts to choose from, such as, regular, thin, medium, medium black, etc.

Typography is the visual representation of text, it can communicate more about your brand than words alone.  Your web design's typefaces should amplify your brand voice, while also looking sharp on the screen.

Below we will discuss ten of the best Google fonts, as well as tips for choosing the best fonts for your website:

10 Best Google fonts for websites

Google Fonts is a resource of free licensed fonts provided by Google.  The ten listed below are all available on Google Fonts at the time or writing.  These fonts will make your website look professional on any device.

1.  Lato

This is a Sans Serif font that is suitable for titles and body text.  Its rounded, classic proportions create a sense of harmony and warmth.

2.  Forum

This Serif font works well for titles and headlines, making it a good choice for your website's primary font, giving your text a vintage feel.

3.  Barlow

The Barlow Sans Serif is a nice clean font making it effortless to read.

4.  Caudex

Caudex was originally designed for print in the late 90s, but has since been adapted for the web.  It has a trendy, contemporary feel not dissimilar to medieval manuscripts.

5.  Poppins

Poppins is a Sans Serif that is clean and minimalist based on geometric forms and perfect circles.

6.  Questrial

This font was created with website design in mind, maintaining high legibility in any context.  Influenced by modern Swiss design, Questrial's look is based on full circles.

7.  Rozha

This is one of the best fonts for titles and headers with its high contrast.

8.  Libre Baskerville

This classic Serif font is the web version of its 18th century predecessor.  It is perfect for the body text of your website.

9.Montserrat

A geometric Sans Serif, Montserrat feels modern and clean.

10.  Cormorant Garamond

Based on the 16th century typeface, this serif font brings an elegant, traditional air to a website.

How to choose the best fonts for your website

Now you now a thing or two about fonts, here's a guide for choosing the right ones:

Fonts should match your brand's tone

Ensure that your font scheme is cohesive with the rest of your visual brand.

Whether your brands look is corporate, arty or on trend, your font scheme has to be cohesive with the rest of your brand assets, such as other digital advertising or paper adverts.

List your fonts by importance

Try to stick to no more than three fonts on your website.  It will improve your sites design and make your site more accessible.

Each font should carry a different level of importance.  In order to retain a clear sense of hierarchy, choose a primary font, a secondary font and an optional accent font.

The primary font is most visible and should be used on headers.  This font will be most associated with your brand.  This font can be dominant and distinct from the rest of your fonts.

The secondary font is used for the bulk of your text, so it is going to be highly legible.

The accent font is only used for very specific purposes, this font is usually reserved for calls-to-action which needs to draw a persons attention to the most important button on your page.

Font sizing

The next consideration is the size of font you want to use across your website.  Areas that need to be considered are; large titles, subtitles and paragraph text.

Of course if you are getting a website designer/developer involved then you won't have to worry about fonts because, here at DRA we take care of all of this for you, choosing the best fonts for readability and style without impacting the overall aesthetics you are trying to achieve.