(Long)wh.png){kind=logo}
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:
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: Nidud
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
Designed by: Łukasz Dziedzic
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
Designed by: the Indian Type Foundry
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.
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: Jeremy Tribby
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
Designed by: The Indian Type Foundry
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
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: Christian Thalmann
Based on 16th century typefaces, this serif font brings an elegant, traditional air into web design.
Designed by: Julieta Ulanovsky
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 available 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
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 overwhelming for a novice in web designer, but here at Crystal Coded we of course have Wix Certified Experts here to help you along the way. If you need to hire wix designer just click below and we will happily assist.
Need a new Wix Web Design Services or Wix redesign, but don't have the time to make it your self? Hire Crystal Coded's Wix Designers to help you get it done. Still have question, check out our Wix Faq.
Also check out some of our other blogs
Credit: wix blogs, font squirrel