Typography Combinations with Google Fonts

Typography Combinations with Google Fonts

27.07.2017 , admin , Allgemein, Design, Visualisation 0

What exactly are Google Fonts?

Google Fonts launched in 2010 and is today the most popular Webfonts provider. Google Fonts is an interactive directory of free hosted web fonts released under the free software licenses SIL Open Font License 1.1, and Apache License. The fonts come from different designers and are so-called open-source fonts. Almost 700 fonts are now offered by the search engine giant. Google is hosting the fonts on there own servers. They are free of charge for commercial use. Free use on any website. In addition, the fonts are very easy to integrate. With a single line of code you have a huge selection of fonts available.

How to integrate Google Fonts on your website?

Here you can find the documentation how to to do it.
Getting started to use the Fonts API

10 golden rules you should use when combining fonts

Here you can find a very good article about the basics of combing fonts.
Read the blog post

Font combining resources

Check out these great resources to help you find pairings to make your website design look totally professional.

Web Font Blender

Try different fonts together with Web Font Blender, which allows you to choose a header, subheader, and body font. You can grab code from Font Blender to try the font combination in your browser.

Type Genius

With this nice tool you can select a font from the drop down list. Type Genius suggests a pairing based on professionally designed websites. It includes a lot of the Google fonts.

Font Pair

This website provides a long list of great pairings, sorted by font types. All of the text is editable, so you can paste in your own content.

Textrecycling

Even placeholder text wants to produce nice effects. Our placeholder texts are unique, resource-saving and individual. Recycle your texts. Our service for you.

Some Font Combinations to check out

Feel free to switch up which font is the header and which is the body, trying different weights, italic and so on. Try them with the Web Font Blender.

Typography Combinations with Google Fonts