How to Choose the Best Fonts for Your Website


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:


Lato

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.



Best fonts for websites: Lato


Forum

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.



Best fonts for websites: Forum


Barlow

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.



Best fonts for websites: Barlow


Caudex

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.



Best fonts for websites: Caudex


Poppins

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.



Best fonts for websites: Poppins


Questrial

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.



Best fonts for websites: Questrial


Rozha One

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.



Best fonts for websites: Rozha One


Libre Baskerville

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.



Best fonts for websites: Libre Baskerville


Montserrat

Designed by: Julieta Ulanovsky


A geometric sans serif, Montserrat feels modern and clean while boasting a distinctly recognizable look.



Best fonts for websites: Montserrat


Cormorant Garamond

Designed by: Christian Thalmann


Based on 16th century typefaces, this serif font brings an elegant, traditional air into web design.



Best fonts for websites: Cormorant Garamond


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.



Best font for websites


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:



Font combinations for your website


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.



Font classification: Serif, sans serif and script fonts

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:


Titles: 30-70px

Subtitles: 22-30px

Paragraph: 16-20px


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

Make_an_Impact_Online.png

This Blog was created with Wix Blog