How to choose the right font pairs in web design
How to choose the right font pairs in web design: Font pairs allow you to separate the title from the description and make the text more readable. They can be found anywhere – be it a regular brochure, banner or landing page.
In this article, we will figure out why you can’t do without font pairs and how to choose them if you don’t understand anything about it.
Font pair – how is it?
In design, we regularly encounter font pairs – this is when one font is used for one fragment, and a secondary one for another. As a rule, this is a pair of title + text description, while the fonts are combined with each other and complement each other.
Take a look at the banner below for an example:
In this case, we have a poster with two different fonts – the title uses an obvious serif font, and the description uses a grotesque. In addition, the font in the heading looks accented due to the fact that its style is bold – this is also one of the characteristics of the font pair. If two different fonts were of the same style, for example, bold, then it would be poorly read. Although it all depends on the design, and in some cases this approach can be justified. But in most cases, bold + normal is used, thus creating a kind of hierarchy.
That is, fonts can be just different styles? Doesn’t it have to be different?
All right. One font can be used, but with a different typeface. For example, you can use Helvetica Regular for the body text and Helvetica Bold for the title. Fonts in the same typeface always look good with each other – they were invented for this.
Why font pairs are needed
A good example of a font pair is when an interesting font is used for headings, and the whole point is revealed by a regular one that is easy and familiar to read. To understand the whole point, just take a look at the example below:
Here we see an interesting title and a regular font in the description. If only one font from the title was used, then everything would look ridiculous, and it would be extremely difficult to read this. Therefore, the second font was chosen – a simple grotesque, which looks as informative as possible; people are accustomed to reading this format.
Note that this heading is interesting not only because it is accentuated and creates a hierarchy, it also plays along with the layout. Such a font in the title immediately hints to us that in this layout we will talk about something “sailing”. This hides another essence of font pairs – with one font we set the mood, and with the other we reveal information.
It turns out that you need to take two fonts – bold and normal?
Not really, it all depends on the situation. Sometimes it happens that the heading comes with a thin style, but just a large size. It all depends on what the overall design of the picture is. That is why you can use not 2 fonts, but 3 or even 5. As a rule, two different fonts are used, but there can be much more of their styles. For example, the title is in bold, the subtitle is in normal italics, and the content is in regular.
The main idea of font pairs is to show hierarchy and play along with the mood of the design. How to choose such a combination – we’ll talk further.
General rules for combining
The first thing you should pay attention to is the similarity of fonts. If they are as different as possible, then the reader may have the opinion that two inscriptions accidentally ended up on the same sheet. This principle is tried to be observed when selecting font pairs.
As I said above, the best option is to use one font with different styles. But this is not always interesting and appropriate, so it is better to diversify such a choice with options. The classic combination is a sans-serif font (grotesque) for the title and a serif font (antiqua) for the body text. Headings may use decorative or cursive type combined with serif or grotesque.
In general, different fonts can be combined, the main thing is to understand how it works. Here are the main characteristics to consider when choosing a pair:
- Fonts can be not only different sizes, but also different widths, heights, narrow or wide.
- The degree of openness of signs. In this case, you can see how the letter “c” or “e” is written in different fonts. They can look like a semicircle or an open circle.
- The shape of the letters. Some fonts have flowing soft lines, others have a lot of sharp corners.
- line contrast. This is the gradation of the thickness of the strokes that form the letter.
- There are serifs or not. Serifs in fonts are underlining letters, in the example above you can see them in the first two options.
- The presence or absence of decorative elements. Such fonts can be decorated with flourishes and patterns that are uncharacteristic of ordinary grotesques or serifs.
- Font thickness. By default, the font can be bold.
Examples of ready-made combinations
Let’s now look at a few popular examples of type pairs that can be found in design.
The first pair is Futura PT Demi + PT Serif Normal. Bold sans-serif + serif is great for illustrating hierarchy and suitable for a text block.
Kazimir Text Light + Fira Sans Light. Even though the title is thin outline, it is still clearly visible because of the serifs and the large size.
Cormorant Garamond Bold + Roboto Normal. And another good example is an interesting serif font + grotesque in the description.
There are countless such font pairs. You can choose them yourself, based on the characteristics that we discussed above. But you can go a simpler way – use special services to find couples. We will consider them in the next section.
Services that will help in the selection of font pairs
With the help of these tools, you can not only find a pair, but also decide on the main font. Most of these tools are very easy to use, but they do not guarantee that the suggested font options will fit perfectly into your project.
In general, let’s see how to use all this. I think that one of these services will definitely suit you.
Google Type
A selection of fonts from Google. It offers users a large number of quality fonts available for free download. Using Google Type, you can quickly find the right combination of fonts that will look good both digitally and on physical media.
It is worth noting that most fonts are suitable for those who need Latin. But you can find many examples for Russian-language projects. Watch and study – the service definitely deserves attention.
JustMyType
JustMyType is an extremely simple page with several font pair options for your English language projects. Although the fonts are few, it is worth saying that these are really well-matched fonts that fit together perfectly.
The creator of the service, Daniel Eden, warns that his choice should not affect the final decision of the designer. Typography is still an art, and when choosing fonts, you need to trust your taste.
The Art Of Mixing Typefaces
The Art of Mixing Typefaces service is a kind of cheat sheet for designers that allows you to quickly find fonts that match each other. Using it is very simple – select a font along the vertical axis and then see what fonts it can be used with.
It is worth noting that all fonts support Cyrillic, so you can hang this cheat sheet right in front of the screen and use it whenever you start working on a new project.
Type inspiration
Typespiration is a service with a huge library of different font pairs. Its peculiarity lies in the fact that the fonts are shown immediately as they will look in the design: pairs are shown with different variations of color schemes. Also, each font is accompanied by a brief annotation and tips on its use. There is a lot of Cyrillic, so you can safely take the service into your notes if the project is in Russian or English format.
Font In Use
The Font In Use service will help you find many interesting fonts and font pairs. Designers who work with this service demonstrate how fonts can be used in their projects. Each example is illustrated with mock-ups, signs and brochures from real life, which allows you to immediately see the live implementation.
Adobe Fonts
Adobe Fonts is an amazing selection for those who use Adobe fonts. The tool allows you to quickly find and purchase various fonts that you can use in your projects. Adobe guarantees the high quality of all offered fonts, so the biggest problem will be the final choice of font pair.
Typ.io
Typ.io is a huge selection of font pairs that are used on various websites. With this service, you can easily find the main and additional font. The main thing is to make a choice, as it is very wide – as many as 300 pages with different options.
Type wolf
Another English-language resource where you can find fonts from the Latin alphabet. All examples are advisory in nature, the final choice is still up to the designer. The choice of font pairs is small, but on the site you can find many collections with tips on choosing fonts, for example, there are collections with alternatives to such popular families as Helvetica or Futura.
Font Combinator By Typotheque
Font Combinator By Typotheque – on this service you can visually see how fonts will look in different sizes and typefaces. All the user needs to do is select a font and drag it onto the heading or body text. The choice of fonts is small, but they all fit together well.
Canva
The last service we will talk about is the official resource from Canva. More than 20 different fonts are collected here and their main characteristics are described, as well as recommendations for choosing a pair. Most fonts are only suitable for English projects, but there are some from Cyrillic. You can definitely find something worthwhile.
Conclusion
A font pair is an opportunity to set a hierarchy on the site, as well as maintain the mood of the design. Try to choose pairs in such a way that they combine with each other and fulfill the main role – headings emphasize attention, and text blocks are readable. In all this, both your personal experience and the special services that we talked about above will help.