Google Fonts: seven combinations that you can Copy and Use

It is not the first time we talk about the importance of typography in graphic, web and publishing design. You can find in this blog some articles about creative and original fonts, as well as articles that solve what font to use in each design, and the fonts we use at SiloCreativo. Now that you have an overview of the use of fonts…. it is time to combine them!

Normally, unless you are at a project in which the paragraph structure is very complex, you must divide the text in title, subtitle and paragraph text. Subtitles can be more than one (subtitle 1, subtitle 2 …) In this case, it is advisable to use the same font for all of them, differing from each other in the text size (in subtitle 1 is larger than in subtitle 2 and so on.)

Thus, through some examples of combinations of fonts, (used by us in our projects and designs) we will show you the 3 basic rules you must follow to combine fonts in designs. They are examples, because there are millions of possibilities, but after reading this article, you will see that to have a “top ten” of fonts and combine them following the rules is the best option!

How many different fonts should I use?

One of the main basic rules when it comes to font combinations is the number of typefaces used in the same project. We all remember our school works, where the use of the computer was the latest style and so we wanted to capture everything we knew to do with it. The result of it was that in a work of about 1000 words, we used the largest number of different fonts, and of course endlessly using Comic Sans! This, in addition to causing disorder, in most cases, is the cause of lack of readability.

The most convenient is to use 2 or 3 different fonts. As you will see in the examples of combinations, sometimes with a single family of typefaces you can make the whole text. For this, it is important to keep in mind the existence of a lot of font families like “light”, “medium”, “italic”, “bold”, “black”…. (Oxigen, roboto, lato, advend pro.) With just one family you can convey the distinction between title and paragraph and provide the consistency that a project needs.

roboto-google-fonts
The “Roboto” font family is so extensive that only with it you can create various combinations. Because of its good readability, this is the perfect font for paragraph text.

creative-font-combination
You can use three different fonts combining one in capital letters for the title, as in this example the “Oswald”, and distinguish sans serif (“Roboto”) from serif (“Bitter”) for the subtitle and paragraph text. It is a risky set, but it can give great results.

Readability in paragraphs vs. creativity in titles

Another principle that must be clear is that although almost all the fonts are useful for “titles”, not all of them are suitable for paragraph text. Moreover, when this is a project in which the paragraph text is essential, there are few fonts that can be used. As you have seen, although at SiloCreativo, we have several typefaces for titles, when we talk about paragraph text, we only play with a few fonts such as “roboto”, “oxigen”, “lato” or “pontano sans”. As for the title almost anything goes, for the paragraph text you must be aware that the most important thing is readability, considering that it is a text to be read, and therefore it is very important to choose the right typeface.

typography-combination
With “Playfair display” we can combine all the rules: this font is perfect for titles, but it is not recommended for paragraph text. In this way, we can combine two fonts of this family with another, using a contrasting font (“Lato”.)

google-font-creative
Considering that “Advent Pro”, has not the readability required for paragraph text, we use “Oxygen” for that purpose, combining the two types of Advent Pro font family for title and subtitle.

Create contrast between your fonts

As you have seen, I recommend that you use contrasting fonts for title and paragraph. For the paragraph we are somewhat restricted because of the readability, but for the title, there is not such restriction. So, a good way to combine them is to include contrasting typefaces.

If you use very similar fonts but they are not from the same family, what you get is a plain text. In the case of using the same family, you should combine fonts as you have seen in the first point, for example, “bold” for the title and “light” for the paragraph.

Another good option is to use a combination of serif and sans serif. The important thing is to create contrast, and as you know that in the paragraph text we are somewhat limited, it is in titles where you should be more creative.

combination-typography
The originality of “Lobster two” font makes it create contrast with readable fonts such as “Pontano Sans“. Lobster two should only be used for titles!

bazar-tipography
Bazar” font is perfect for titles, as it has strength and contrasts with the paragraph text (you can see it running in our design to WordPress, Vowels theme.) In this, however, we used the “Oxigen” font because we were looking for a highly readable font.

While the examples have been accompanying each rule, when you return to see them after reading the whole article, you will observe that all combinations follow the rules! And you, how do you combine fonts?

NOTE: In this case, all the fonts except for BAZAR are Google Fonts, so you can download them for free and use them easily for all your projects. The BAZAR font is not Google Fonts, but it shares the same features: is free and open license.

Leave a Reply

Your email address will not be published. Required fields are marked *