Message us

All great projects start with a conversation.

Thank you. We received your message and will get back to you soon!

Browse our work

or Send another message?

UX / UI

My Top 5 Google Fonts

Launched in 2010, Google Fonts is a web font hosting service from Google that five years on offers a whopping 698 web fonts. Readily available, web optimised and most importantly free, Google Fonts are a boon to economical web design.

Here are some of my favourites.


top 5 google fonts

Open Sans

Open Sans

Clean, understated, highly legible and available in weights ranging from Light to Extra Bold, Open Sans is a highly diverse font, and a web workhorse.

How to use:

Most often used for body text, it can be paired with itself to make for a wonderfully clean header, and can lend an element of elegance and professionalism to any website.

Where to use:

Most suited to corporate or technology focused websites.

Watch out for:

Overused. Open Sans ranks #1 on Google Fonts in terms of popularity, and has been dubbed ‘the new Arial’ by Typewolf[1]. Additionally, the dropped capital ‘J’ sticks out a little awkwardly.

Montserrat

Montserrat

Available in just two weights, this font that was designed for one purpose: making beautiful headers. It’s spacious, indulgent letter forms scream sophistication and it’s heavy weighted enough to make an impact.

How to use:

Great for headings, but apply all caps and increase the character spacing slightly and it’s perfect for button text.

Where to use:

Design or fashion oriented websites, personal blogs, trendy e-commerce sites.

Oswald

Oswald

The quintessential condensed typeface, Oswald works best when in all caps. Available in light, regular and bold, it’s suitable for most occasions, and its narrow letterforms allow for longer-than-average headers.

How to use:

Make it all caps and stick it in a heading. Let the context of the website determine the font weight. Most effective when combined with a neutral body font such as Open Sans.

Where to use:

This versatile font feels equally at home on a trade site as it does on a travel blog, and at a push can even reach into the realms of business and education.

Watch out for:

Too heavy for body text and two weak for a header, the lower case really doesn’t have much application.

PT Serif

PT Serif

A well-balanced and neutral serif web font, PT Serif only has two weights, but both are beautifully crisp. It’s rounded slabs make it a friendly alternative to system default serif fonts such as Times New Roman and Georgia, and help it work well as a header once the pixel size is cranked up.

How to use:

Comfortable as a body and impactful as a header, either way is contrasts nicely with Source Sans Pro.

Where to use:

Works great on personal blogs, as well as fashion, literature and high-end websites.

Source Sans Pro

Source Sans

Another clean and legible sans serif font, Source Sans Pro’s narrower letterforms and rounded accents lend it an air of sophistication. It comes in a large range of 6 weights, complete with italic counterparts.

How to use:

Their high legibility make the regular and light weights well suited to body text, while the ultra heavy black weight makes for a powerful header when in all caps, and contrasts nicely with a PT Serif body.

Where to use:

Blogs, sites with large amounts of body text.

[1] http://www.typewolf.com/blog/the-ten-most-popular-web-fonts-of-2013