How to Choose the Best Fonts for Your Website
This post was last updated on June 17, 2020.
When creating a website, there’s a lot to keep in mind. Between writing your content and choosing the perfect visuals, some fundamental elements may fall by the wayside. And if there’s one thing that you don’t want to overlook, it’s your website’s fonts.
Typography is defined as the visual representation of type, and can communicate more about your brand than words alone. Your web design's typefaces should therefore amplify your brand voice, while also looking sharp on the screen.
In this guide, we’ll 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 font provided by Google. The following ten fonts, all available for on Google Fonts, will help your website appear professional on any device:
Designed by: Łukasz Dziedzic
A sans serif font that’s equally suited for both titles and body text. Its rounded, classic proportions create a sense of harmony and warmth.
Designed by: Denis Masharov
This serif font works especially well for titles and headlines, making it a good choice for your website’s primary font. Its Roman proportions give it somewhat of a vintage feel.
Designed by: Jeremy Tribby
The Barlow sans serif font is clean and low-contrast, making it effortlessly readable. The typeface design looked to California license plates and highway signs for inspiration.
Designed by: Nidud
Caudex was originally designed for print in the late 90s, but it has since been adapted for the web. It puts a trendy and contemporary spin on letterforms seen in medieval manuscripts.
Designed by: the Indian Type Foundry
One of the best free fonts, Poppins is a sans serif type family whose clean, minimalist aesthetic is based on geometric forms and perfect circles.
Designed by: Joe Prince
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.
Designed by: The Indian Type Foundry
This display font’s high contrast is a great fit for your site’s titles and headers, making it one of the best fonts for websites.
Designed by: Pablo Impallari and Rodrigo Fuenzalida
This classic serif font is a web-optimized version of its 18th century predecessor. It’s perfect for body text on the screen.
Designed by: Julieta Ulanovsky
A geometric sans serif, Montserrat feels modern and clean while boasting a distinctly recognizable look.
Designed by: Christian Thalmann
Based on 16th century typefaces, this serif font brings an elegant, traditional air into web design.
In case you’re creating a website on Wix, these beautiful fonts are all available for use on the Editor - in addition to hundreds of other typefaces. In case you have a different typeface in mind, you can simply upload your own font to the Editor in just a few clicks.
How to Choose the Best Fonts for Your Website
Now that you’re familiar with some of the best fonts for your website, here’s a guide for choosing the right ones:
01. Make sure your fonts match your brand’s tone
Fonts are an indispensable component of branding. Ensure that your font scheme is cohesive with the rest of your visual brand assets.
Whether it's sophisticated and trendy or rugged and adventurous, your use of typography should contribute to your website’s overall storytelling.
02. Rank your fonts by importance
As a rule of thumb, never use more than three fonts on your website. Not only will this practice improve you site's design; limiting the number of fonts will make your website more accessible, too.
Each of these fonts should carry different levels of importance. In order to retain a clear sense of hierarchy, choose a primary font, a secondary font and an optional accent font:
Your primary font is the most visible one, and should be used on the headers of your website. This is the font that will be most associated with your brand, even if it’s not the most commonly used one throughout the site. As a result, the primary font can be more dominant and distinct than the rest of the fonts on your website.
Your secondary font will be used across the bulk of your written website content. This includes paragraphs, descriptions, blog articles and more. While your primary font can be eye-catching and unique, your secondary font should be, first and foremost, highly legible. Fonts that are too ornate are harder to read when applied over long chunks of texts.
Finally, your accent font is one that you’ll only use for a very specific purpose. When it comes to websites, the accent font is usually reserved for calls-to-action, drawing attention to your most important button on the page. Your logo design font is another option that can be used as an accent font.
To help you mix and match typefaces for your website, here are our designers’ favorite font pairings:
03. Learn the basics of font classification
The art of typography is rich and complex - ranging from legibility to text alignment and spacing. As a start, focus on the most important classification first: the serif, sans serif and script fonts. Here’s a quick summary of each one, and when to use them:
Serif fonts: A serif is a small line at the end of a stroke in a letter or symbol. Serif fonts are considered classical and elegant, and are mostly associated with print. Examples include Times New Roman, Georgia and Bodoni.
Sans serif fonts: These are fonts without serif lines at the end of their letters. Sans serifs are clean, modern and often neutral-looking, making them a great fit for web design. Examples include Wix's own Madefor font, Helvetica, and the infamous Comic Sans.
Script fonts: Scripts, including cursive fonts, are modeled after handwriting styles. It’s best to keep this style limited to titles only, as writing your body text in script would most likely present a challenge for your audience. Examples include Lobster and Lucida Handwriting.
04. Apply text themes
Once you’ve chosen your type scheme, you’ll need to decide on different letter sizes for large titles, subtitles, and paragraph text. To get you started, we’ve put together these ranges as a general guideline for most websites:
If you’re creating a website on Wix, you can customize and save text themes so that your titles, subtitles, paragraph text and more will always be consistent in font, size and weight.
This practice not only makes the design process smoother, but it also improves your website’s user experience and boosts your SEO.
Apart from size, additional factors that impact the visual weight of a font include stylistic changes like bold, italic or underlining. However, excessive use of these styles may result in an overwhelming effect and could ultimately detract from your message, so be sure to use them in moderation.
By Blake Stimac
Community & Social Media Manager
By Eden Spivak
Design Expert & Writer