Search
  • Crystal Coded

How to choose a good font for your website


how-to-choose-font-for-your-website-from-a-wix-designer

When tackling the task of creating a new website, or refreshing a old one, there’s a lot to keep in mind. Between choosing the awesome visuals and writing your great content, some fundamental elements may fall by the wayside. If there is anything that you don’t want to overlook, it is your website’s fonts.


Typography can communicate more about your brand than words alone. Your web site design's typefaces should therefore amplify your brand voice, while also looking great on a computer screen. Of course you want to incorporate your branding but be readable at the same time.


In this blog, we’ll discuss the top ten Google fonts, as well as the proper 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:



Forum

Designed by: Denis Masharov

forum-font-free

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.

Download this font for free

Caudex

Designed by: Nidud

caudex-font-free

The font was originally made in the late nineties, and used for printing some old handwritten text. It puts a trendy and contemporary spin on letterforms seen in medieval manuscripts. Download this font for free

Lato

Designed by: Łukasz Dziedzic

lato-font-free

A sans serif font that’s equally suited for both titles and body text. The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. Download this font for free

Poppins

Designed by: the Indian Type Foundry

poppins-font-free

One of the best free fonts, Poppins is one of the new comers to this long tradition, whose clean, minimalist aesthetic is based on geometric forms and perfect circles.


Download this font for free

Questrial

Designed by: Joe Prince

questrial-font-free

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.


Download this font for free

Barlow

Designed by: Jeremy Tribby

barlow-font-free

The Barlow sans serif font is clean and low-contrast, making it effortlessly readable. The family includes 54 manually-hinted styles in three widths and nine weights, as well as obliques, suitable for large and small digital and print use. Download this font for free

Rozha One

Designed by: The Indian Type Foundry

rozha-one-font-free

Created primarily for display use, the extreme difference between its letters’ thick and thin strokes make it an excellent choice for large headlines and poster-sized graphics


Download this font for free

Libre Baskerville

Designed by: Pablo Impallari and Rodrigo Fuenzalida

libre-bakerville-free

This classic serif font is a web-optimized version of its 18th century predecessor. It’s perfect for body text on the screen.


Download this font for free

Cormorant Garamond

Designed by: Christian Thalmann


cormorant-garamond-free

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


Download this font for free

Montserrat

Designed by: Julieta Ulanovsky


montserrat-font-free

The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century. A geometric sans serif, Montserrat feels modern and clean while boasting a distinctly recognizable look. Download this font for free

If you are creating or redesigning your website on Wix, these beautiful fonts options are all available for use on the Wix Editor - in addition to hundreds of other typefaces/fonts. If these fonts or the many other fonts availible in wix are not your taste, you can simply upload your own font to the Editor in just a few clicks.



How to Make the Best Fonts Decision for Your Website


how-to-make-the-best-font-decisions-from-a-wix-certified-expert


Make sure your fonts match your brand’s tone

You always want to make sure that which ever font scheme that you decide for your website is cohesive with the rest of your visual brand assets. Some time this is easier said then done, and help from hiring a wix certified expert can help.

Whether it's sophisticated and trendy or rugged and adventurous, your use of typography should contribute to your website’s overall storytelling.

Follow the font "Golden Rule"

As a rule of thumb, you never really want to use more than three fonts on your website. Doing so will improve you site's design; also limiting the number of fonts will make your website more accessible, too (cuts down on loading time).


The three fonts that you choose should carry different levels of importance. In order to retain a clear sense of hierarchy, choose a primary, secondary font and an optional accent font:


Your primary font should be most visible one, big and bold as I would like to say. Primary fonts will work best for the headers on your website. This should also be 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, your primary font can be more dominant and distinct than the rest of the fonts on your website.

Your secondary font should be used across the majority site and used for the bulk of your written website content. This includes paragraphs, descriptions, blog articles and more. While your primary font can be big and bold, your secondary should be the font that is most legible. Fonts that are too ornate are hard on the eye when applied over long formats of texts.


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. Font from your logo design is another option that can be used as an accent font.


Apply text themes

Once you have made your selection of fonts for your "Golden Rule", you’ll need to decide on different letter sizes for large titles, subtitles, and paragraph text. Here is a general guideline for most websites as well with size ranges:

Titles (PRIMARY FONT): 30-70px

Subtitles (ACCENT FONT): 22-30px

Paragraph (SECONDARY FONT): 16-20px


The great thing is if you’re creating a website on the Wix platform, 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 not only make the designing process easier but it also improves on the website user experience.

Again sometime this can all be overwheming for a novice in web designer, but here at Crystal Coded we of course have Wix Certified Experts her to help you along the way. If you need to hire wix designer just click below and we will happily assist.


hire-wix-designer

Credit: wix blogs, font squirrel

2 views0 comments