Google Font Combinations and Colour Pallets

These days it’s much easier to create captivating Typography combinations due to new technologies and tools such as @font-face, API utilisation and CSS3. Although choosing a font for your website isn’t easy, and finding a font combination is even harder.

Typography is an extremely important factor to good web design, for good reason, if your text isn't easy to read, no matter what your content says your users will struggle to read it.

Things to keep in mind:

  • Think about the message you want your typography to convey - what your website trying to say?
  • The font you select should compliment the content of the website. So if you are designing a children's site, your font will be different to that if you were creating a corporate banking site.

General rules:

  • Combine a Sans Serif with a Serif
  • Avoid Similar Classifications
  • Contrasting font weights and sizes
  • Use a variety of colours - not too many!

In 2011Google made a collection of quality open source fonts available to everyone on the web, this since has grown into an extremely useful resource to web designers.  Here is a collection of some of the best Google font combinations and colour pallets:

Good resource:

Nixie One & Amiro

Fjalla & Average

Rufina & Signika

Abril Fatface & Open Sans

Playfair Display & Roboto

Lobster & Arimo

Sansista One & Kameron

Volktron & Roboto

Gravitas & Kamerson

Cantata One & Noto Sans 

Lustria & Lato 

Nixie One & Raleway

Rufina & Average Sans

Clicker Script & Raleway

Old Standard

Lora & Roboto