Typography Mixing Fonts

Choosing a font is a complicated process and requires careful analysis of your project. But knowing how to match fonts can be even more difficult. How many times have you found yourself in the situation of having to choose a pair of fonts (or more) and have you started to scroll at random the font curtain? Are you curious to know some methods in typography mixing fonts to succeed in combining them in the best way?

In this article I want to give you a series of useful and personally tested advice from me and many established designers around the world on mixed font typography. You will find advice both for those who are beginners with the typography, both for those who already have extensive knowledge about it.

Very often the importance of a good choice of font is underestimated but, as I explained well in this article on how to choose the most suitable font, one or more fonts chosen in the right way can determine the success or failure of an entire graphic project. This article is a sort of continuation and deepening of the guide to typography mixing fonts. But now let’s go straight to the heart of the question: how to match the fonts?

Tips to mixed font typography

To explain this, I have prepared a series of useful tips for combining typographic characters in the best possible way. Let’s start with the basic tips for combining fonts. But remember that, even if “basic”, are very useful tips for anyone working in the field of graphics and design.

Typography Mixing Fonts

Choosing a font is a complicated process and requires careful analysis of your project. But knowing how to match fonts can be even more difficult. How many times have you found yourself in the situation of having to choose a pair of fonts (or more) and have you started to scroll at random the font curtain? Are you curious to know some methods in typography mixing fonts to succeed in combining them in the best way?

In this article I want to give you a series of useful and personally tested advice from me and many established designers around the world on mixed font typography. You will find advice both for those who are beginners with the typography, both for those who already have extensive knowledge about it.

Very often the importance of a good choice of font is underestimated but, as I explained well in this article on how to choose the most suitable font, one or more fonts chosen in the right way can determine the success or failure of an entire graphic project. This article is a sort of continuation and deepening of the guide to typography mixing fonts. But now let’s go straight to the heart of the question: how to match the fonts?

Tips to mixed font typography

To explain this, I have prepared a series of useful tips for combining typographic characters in the best possible way. Let’s start with the basic tips for combining fonts. But remember that, even if “basic”, are very useful tips for anyone working in the field of graphics and design.

What are the bases for typography mixing fonts?

1. Combine a serif and a sans serif

Surely one of the most popular combinations of fonts is to use a sans serif (or sticks) with a serif. This combination is an absolute classic and it is really very difficult to make mistakes by following this advice.

Very often we choose the sans serif for the title and the serif for the body of the paragraph, but why? For a question of readability. The sans serif, in fact, are much more appreciable in large body and therefore in large titles and slogans, while serif ensure better readability. But it is absolutely not a rule and indeed, it is not always a good choice to do so.

In this first example, I show you how using two stick characters for both the title and the paragraph creates a visual conflict. The font used for the title is the Myriad Pro, very clean and neutral, while for the text I used the Bell Gothic, which instead seems to scream “give me more space! A visual tension is then created.

By replacing the Bell Gothic with a serif like the Minion Pro, the effect changes totally! Myriad + Minion is in fact one of the most and popular combinations in mixed font typography. The Stepto & Son blog places this pair of fonts among the 10 best serif + sans-serif combinations for web design.

2. Create a visual hierarchy between fonts

This is a fundamental point. Before you even start wandering about font sites or scrolling with your mouse in the font drop-down, you have to decide which function will have the characters you choose. For example: you can use one for titles, one for paragraphs and one for image captions. You will then need to create a visual hierarchy.

Creating a visual hierarchy between fonts is necessary to make your message clear. In the example below I used the Rockwell for the main title, the Bembo for the paragraphs texts and the Gill Sans for the secondary titles. They are all of three different categories: respectively slab serif, serif and sans serif. Slab serif (font with thick and perpendicular graces) and “eclectic” sans serif like the Gill Sans are perfect for titles, slogans, etc.

Three fonts of three different categories that work together because each of them has a precise and well-defined hierarchical role in this mixed font typography. The structuring of a visual hierarchy is very much used in the editorial field but it should not be limited to that: it can be used for every design project!

Whatever project you are working on, try to ask yourself which element of the layout do you want to be the first to be seen by the reader? It can be, as mentioned, the title of a newspaper, but also the name of a company on a business card or a special offer on a flyer. In short, creating a hierarchy is important for every project that involves typography mixing fonts.

3. Use fonts from the same family

Font families are a very important resource. So why not exploit it?

Font families are those fonts that, within them, include large variations in weight and width. Such as the Meta family designed in 2003 by Erik Spiekermann which includes 28 different weights and widths or the 1956 Adrian Frutiger Univers which had 24.

Resuming the previous hierarchy, you can use the different weights of a font family for the different hierarchical roles you have decided to have in your project. For example, Univers Black for the main title, Univers Bold Oblique for secondary titles and Univers Roman for texts, as in this example:

The effect is still pleasant even if you use a single font thanks to the wonderful properties of the font itself.

4. Avoid using too similar fonts

If using the same font in different hierarchical roles can be nice because it guarantees consistency, instead use different fonts but with characteristics too similar can create an almost imperceptible confusion but in reality very annoying. In particular this happens when you mix fonts of the same category as a serif with a serif, a sans with another sans serif and so on.

I propose again the example used in point 1, however, this time with different fonts than the Myriad and the Bell Gothic used before. I decided to use Univers and Helvetica, which, for a beginner in the world of typography, may look the same, but in reality they are not at all. They remain, however, too similar to feel good together.

5. Do not create visual conflict

This advice groups together many aspects of previous advice. When you try to match a font, you have to aim for the contrast, not the conflict. It is therefore always necessary to avoid fonts that clash with each other. Just because two fonts are different does not mean they can be comfortable together.

An example of a pair of fonts with a high potential for conflict is the couple Impact and Garamond, two fonts radically different from each other, both for shapes and for the height of the eye, both for spacing and for historical period and primary use. In short, too different and conflicting.

6. Limit the number of fonts chosen

One way to avoid the emergence of visual conflicts and also to simplify the process of choosing fonts is to limit the number. It is always advisable to choose at most two or three characters for a project and not to go further.

This “rule”, however, can be easily violated if the project requires it and if it is done in a conscious and voluntary way.

For example, if you need to create a poster in the style of “Victorian” or 19th century, you could take a cue from the posters of that era that made extensive use of various fonts (especially slab serif, born at that time) in the same project.

7. Create contrast

To distinguish the various elements well and give them more or less importance according to their hierarchy, you must create contrast both in size and weight, but also through spacing and colors. The contrast of magnitude is very immediate: a text of greater magnitude will spike more of a text of smaller size. That’s why the titles are bigger than the lyrics, of course. Weight contrast is a similar matter. Usually, in a text, to give more emphasis to specific passages or words, these are written in bold or italic. Taking advantage of the different weights of a font can be a great way to “play” with the hierarchy of your project.

In this example I played with the weights and the size of the Helvetica font, creating a deliberately unsettling effect on the observer. It’s breaking the rules in a conscious way. The BASIC tips on mixed font typography are completed.

Now let’s move on to more tips on typography mixing fonts. These are slightly more specific advice and dedicated to those who already have a good knowledge base on font selection and typography in general

8. Take advantage of the font “moods”

A typical and recurring typographical error is that of not realizing the intrinsic emotional impact of a character, of its mood. Fonts have a personality! By understanding this, you can improve your project. Font personality can change just from one context to another, but in reality the opposite is true, that is, the fonts themselves, with their emotional port, tend to change the context itself. If not interpreted well the mood of the font used can therefore bring the user of your project not to interpret well, therefore, the project itself.

In this example I used Franklin Gothic, a solid and robust font but also elegantly refined, with the Souvenir, an almost playful, casual and disinterested font. These two fonts together are not at all well together with each other because they transmit two different personalities.

Here, instead, replacing the Franklin Gothic with Futura Bold, seem much more suitable to be with the Souvenir. The Futura is in fact a font with a very multifaceted and variable personality but is more suitable as a partner for the Souvenir for many reasons: height of the similar eye, shapes of the individual characters very large and circular (see the two “o”) and both have a peculiar but not prevaricating personality. They are therefore complementary.

Using a combination of non-matching moods can cause the reader to focus on the typography instead of the message, thus generating a bad design.

Of course, if the goal of the project is to make a typographic display, the contrast between two non-matching fonts can be an interesting design choice but while breaking the rules you must be aware and must bring with them an important baggage of knowledge.

9. Use fonts from the same historical period

This is another really important piece of advice that requires a great knowledge of the History of Graphics. Combining two fonts of the same historical period is an almost safe way to avoid conflicts from the point of view of the personality (obviously respecting all the other posts mentioned above).

Two fonts of the same historical period often have a very similar and complementary personality and are well suited to be used together, as was done in their original historical period. An example can be the pair of font Gill Sans and Joanna, both created between the two world wars by the same printer: Eric Gill.

10. Take advantage of the colors in mixed font typography

A correct use of color is extremely important in a project: it can increase or reduce readability, it can nullify or enhance hierarchical choices and can cancel any negative contrast. Intelligent use of color in typography is extremely important for strengthening the hierarchy of a page.

What are the bases for typography mixing fonts?

1. Combine a serif and a sans serif

Surely one of the most popular combinations of fonts is to use a sans serif (or sticks) with a serif. This combination is an absolute classic and it is really very difficult to make mistakes by following this advice.

Very often we choose the sans serif for the title and the serif for the body of the paragraph, but why? For a question of readability. The sans serif, in fact, are much more appreciable in large body and therefore in large titles and slogans, while serif ensure better readability. But it is absolutely not a rule and indeed, it is not always a good choice to do so.

In this first example, I show you how using two stick characters for both the title and the paragraph creates a visual conflict. The font used for the title is the Myriad Pro, very clean and neutral, while for the text I used the Bell Gothic, which instead seems to scream “give me more space! A visual tension is then created.

By replacing the Bell Gothic with a serif like the Minion Pro, the effect changes totally! Myriad + Minion is in fact one of the most and popular combinations in mixed font typography. The Stepto & Son blog places this pair of fonts among the 10 best serif + sans-serif combinations for web design.

2. Create a visual hierarchy between fonts

This is a fundamental point. Before you even start wandering about font sites or scrolling with your mouse in the font drop-down, you have to decide which function will have the characters you choose. For example: you can use one for titles, one for paragraphs and one for image captions. You will then need to create a visual hierarchy.

Creating a visual hierarchy between fonts is necessary to make your message clear. In the example below I used the Rockwell for the main title, the Bembo for the paragraphs texts and the Gill Sans for the secondary titles. They are all of three different categories: respectively slab serif, serif and sans serif. Slab serif (font with thick and perpendicular graces) and “eclectic” sans serif like the Gill Sans are perfect for titles, slogans, etc.

Three fonts of three different categories that work together because each of them has a precise and well-defined hierarchical role in this mixed font typography. The structuring of a visual hierarchy is very much used in the editorial field but it should not be limited to that: it can be used for every design project!

Whatever project you are working on, try to ask yourself which element of the layout do you want to be the first to be seen by the reader? It can be, as mentioned, the title of a newspaper, but also the name of a company on a business card or a special offer on a flyer. In short, creating a hierarchy is important for every project that involves typography mixing fonts.

3. Use fonts from the same family

Font families are a very important resource. So why not exploit it?

Font families are those fonts that, within them, include large variations in weight and width. Such as the Meta family designed in 2003 by Erik Spiekermann which includes 28 different weights and widths or the 1956 Adrian Frutiger Univers which had 24.

Resuming the previous hierarchy, you can use the different weights of a font family for the different hierarchical roles you have decided to have in your project. For example, Univers Black for the main title, Univers Bold Oblique for secondary titles and Univers Roman for texts, as in this example:

The effect is still pleasant even if you use a single font thanks to the wonderful properties of the font itself.

4. Avoid using too similar fonts

If using the same font in different hierarchical roles can be nice because it guarantees consistency, instead use different fonts but with characteristics too similar can create an almost imperceptible confusion but in reality very annoying. In particular this happens when you mix fonts of the same category as a serif with a serif, a sans with another sans serif and so on.

I propose again the example used in point 1, however, this time with different fonts than the Myriad and the Bell Gothic used before. I decided to use Univers and Helvetica, which, for a beginner in the world of typography, may look the same, but in reality they are not at all. They remain, however, too similar to feel good together.

5. Do not create visual conflict

This advice groups together many aspects of previous advice. When you try to match a font, you have to aim for the contrast, not the conflict. It is therefore always necessary to avoid fonts that clash with each other. Just because two fonts are different does not mean they can be comfortable together.

An example of a pair of fonts with a high potential for conflict is the couple Impact and Garamond, two fonts radically different from each other, both for shapes and for the height of the eye, both for spacing and for historical period and primary use. In short, too different and conflicting.

6. Limit the number of fonts chosen

One way to avoid the emergence of visual conflicts and also to simplify the process of choosing fonts is to limit the number. It is always advisable to choose at most two or three characters for a project and not to go further.

This “rule”, however, can be easily violated if the project requires it and if it is done in a conscious and voluntary way.

For example, if you need to create a poster in the style of “Victorian” or 19th century, you could take a cue from the posters of that era that made extensive use of various fonts (especially slab serif, born at that time) in the same project.

7. Create contrast

To distinguish the various elements well and give them more or less importance according to their hierarchy, you must create contrast both in size and weight, but also through spacing and colors. The contrast of magnitude is very immediate: a text of greater magnitude will spike more of a text of smaller size. That’s why the titles are bigger than the lyrics, of course. Weight contrast is a similar matter. Usually, in a text, to give more emphasis to specific passages or words, these are written in bold or italic. Taking advantage of the different weights of a font can be a great way to “play” with the hierarchy of your project.

In this example I played with the weights and the size of the Helvetica font, creating a deliberately unsettling effect on the observer. It’s breaking the rules in a conscious way. The BASIC tips on mixed font typography are completed.

Now let’s move on to more tips on typography mixing fonts. These are slightly more specific advice and dedicated to those who already have a good knowledge base on font selection and typography in general

8. Take advantage of the font “moods”

A typical and recurring typographical error is that of not realizing the intrinsic emotional impact of a character, of its mood. Fonts have a personality! By understanding this, you can improve your project. Font personality can change just from one context to another, but in reality the opposite is true, that is, the fonts themselves, with their emotional port, tend to change the context itself. If not interpreted well the mood of the font used can therefore bring the user of your project not to interpret well, therefore, the project itself.

In this example I used Franklin Gothic, a solid and robust font but also elegantly refined, with the Souvenir, an almost playful, casual and disinterested font. These two fonts together are not at all well together with each other because they transmit two different personalities.

Here, instead, replacing the Franklin Gothic with Futura Bold, seem much more suitable to be with the Souvenir. The Futura is in fact a font with a very multifaceted and variable personality but is more suitable as a partner for the Souvenir for many reasons: height of the similar eye, shapes of the individual characters very large and circular (see the two “o”) and both have a peculiar but not prevaricating personality. They are therefore complementary.

Using a combination of non-matching moods can cause the reader to focus on the typography instead of the message, thus generating a bad design.

Of course, if the goal of the project is to make a typographic display, the contrast between two non-matching fonts can be an interesting design choice but while breaking the rules you must be aware and must bring with them an important baggage of knowledge.

9. Use fonts from the same historical period

This is another really important piece of advice that requires a great knowledge of the History of Graphics. Combining two fonts of the same historical period is an almost safe way to avoid conflicts from the point of view of the personality (obviously respecting all the other posts mentioned above).

Two fonts of the same historical period often have a very similar and complementary personality and are well suited to be used together, as was done in their original historical period. An example can be the pair of font Gill Sans and Joanna, both created between the two world wars by the same printer: Eric Gill.

10. Take advantage of the colors in mixed font typography

A correct use of color is extremely important in a project: it can increase or reduce readability, it can nullify or enhance hierarchical choices and can cancel any negative contrast. Intelligent use of color in typography is extremely important for strengthening the hierarchy of a page.

 

Leave a Comment

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