For this session, we were joined by the font guru himself, Roch, who runs an independent web design and type design studio based in Krakow, Poland. Roch used his latest Lutschine pack to demonstrate the art of font pairing to enhance any design project. Whatever your design persuasion, this session was packed full of useful tips you would not want to miss.
Choose Fonts for the Design
Start by using just one font and making the product work. The main question is, why do you need to use more than one? What purpose does it serve? Different fonts showcase a hierarchy and you can differentiate between important things such as titles, quotes, etc. That being said, it might not always be necessary. Let’s look at some examples:
Swiss School of Design, from Marvelous Designers, uses a minimalistic approach to achieve the design as shown in the image below. The minimalist epigraphy makes the whole design look extremely clean and readable. A bold version of the font and a regular text version of the font, which is lighter, is used along with spacing, alignment and color.
Pro tip: Choosing a different size of the font or different color immediately highlights the most important parts of the poster.
As you see in the image below, the design is very graphic, but at the same time extremely minimalistic with the simple use of typography. There are minimalistic fonts and they are not used in conjunction with any other fonts.
Choosing more than one font for design is a luxury, but you don't necessarily have to do that. The layout features are important when choosing more than one font.
The poster shown in the image below was prepared for a previous live session using two fonts from the same family. Everything is greatly structured despite having dense information.
Pro tip: Everything connected or associated with fonts is generally optical. It should look good as well as harmonious.
Understand the Importance of Type
While everybody sees the shapes of the letters, there are a couple of other things to consider when choosing the font and how to add to a design.
Spacing and Kerning
Spacing and kerning is the horizontal spacing between the letters. It is a good idea to make these spaces a little bigger or smaller. As a general rule of thumb, add spacing for titles or for bigger sizes of text. Use narrower spacing for small text or big paragraphs of text for legibility reasons.
When you set the paragraph of text, it's very important to watch if the lines are too close or far from each other.
While designing anything, it's good to keep in mind the space around your text and how much it influences aesthetics and legibility.
In a complex design with loads of information, choose a minimalistic design as it will also define the kind of font you choose.
Every font has its own mood. Choosing the best mood with regards to the font, with correct spacing and font pairing can be beneficial. You can have two nice fonts that work together well, but if the spacing is off then the fonts won’t sit well.
Observe Font Pairing
When you take two fonts, notice which elements have an influence on the optical harmony. Observe the width of the fonts, whether they are thin or bold. If the letters are wide or very narrow, the first step is to set an x-height. It drastically changes the perception of the font, if the letters are smaller compared to the capital letters.
You should also consider the following:
Pro tip: Have an easy, practical start. Answer questions such as why you need two or more fonts and what their purpose is. Choose contrasting fonts, as they do not interfere with each other, or similar fonts from the same family, so they complement each other. Always remember to achieve the visual goal.
Start with Basics
Start with the basics when you want to feel more comfortable with font pairing. Begin by pairing fonts from one family. For example, the poster shared above had Montreux Grotesk and Montreux Classic in bold and normal. It creates contrast but works naturally and effortlessly.
Choose fonts from one type system. A type system from one designer is a good idea because designers have their own design language. Even if the fonts are not from the same family, they share some characteristics from the visual language of their designer.
Similarly, if you want to use a very modern font, the second one should also be modern. This is easier because they will have similar characters. Fonts should have at least one similar characteristic. There are many characteristics that will marry one font with another, making them work together even if they are in contrast with each other.
For example, Lutschine and Montreux have similar apertures with some details in the letter shapes. They make the design consistent.
These following combinations work well together:
Exercise with Fonts
Develop your ability to use fonts. For example, in the beginning, try to design something with one font. Use your white space and the size of the font to create contrast.
To make everything work and look good, add weight. Then pick two fonts from one family or system. Then try contrasting fonts, and so on...
Understand Type Systems
A type system is a set of typefaces or type families that are designed in one language to work with each other. For example, see the type system below for Lutschine. It is a font used for headlines but it has a big family with different weights.
Similarly, Conthey is as big as Lutschine. It is much more playful because of its unique case. The uppercase letters are the same height as the lowercase letters, making it much more playful in character.
The Montreux family is a huge family of fonts with many different styles. Each of the Montreux styles shares the same proportions. They each have a different character, but the overall design fits together.
See the examples below on how you can make a contrast with two fonts.
Here’s a one-type family in which bold and regular work perfectly together. The font used is Rothorn.
The other example is Amphibia, where narrow and wide fonts work well together. They are all different, serving varying purposes, but aligned well. Use the narrow version for titles and the other for text to ensure a good contrast.
The font used in the example below is Montreux Grotesk. The differentiating factor here is color.
The next example is x-height difference using the Lutschine Font. As you can see, if you have a lower x-height, the font looks much different than when you have a higher x-height. A higher x-height looks bigger, especially when the small text is set, which tends to be more legible. So when you have a small text, go for a bigger x-height for better deliverability.
Choose two fonts from the same family, as shown in the example below.
Use the Bozon and Qualion Text, as shown in the example below. The strokes of the humanist font are not so wide and make it organic to use. Both these belong to the same family and share the same aperture.
The examples below are retro fonts. They are extremely different fonts but are softer on the edges. They have characters that are similar.
The example below showcases a friendly mood. The fonts have rounded endings and shapes, making them a great contrast.
The Conthey Narrow and Lutschine examples below are from one design system. They are both different fonts but have similar characteristics. They have flat sides and rounded endings, which also makes them extremely consistent.
Here’s an example of Lutschine Narrow, in lowercase and uppercase. This also created great contrast.
Lutschine Narrow and Montreux Grotesk, as shown below, have a closed aperture. They have small details, like cut corners, and are shaped similarly.
Size differences create a hierarchy. See the example below for size contrast.
See the example below to understand how the same page works with different fonts. Make one big headline, one smaller headline and text. Using the Rothorn font, add a bold headline, light subline and regular text. The subline and text look similar because of the same weight.
Often we choose a bold weight for the title. We can also pick a lighter weight for the title and a regular weight for the text to balance it. In large sizes, lighter weight can look good because in small sizes, light weights are too thin and are not very legible. In large sizes, they look very attractive and promising. So don’t just take bold weight into considerations for titles.
Use Teramo italic for a bigger title and regular for texts. For a paragraph of text, this font is contrasting and extremely dramatic, so avoid using it for text.
You can also use Eckhart with Montreux Grotesk.
Use Kefir for round and friendly titles. It is sharp, legible and very crisp, but it has the same proportions as Qualion because they are both from one type system. They have the same x-height, the same aperture, similar letterforms, and they work great together.
The next example has Paneuropa Retro InLine that works great together for a retro vibe.
Montreux Informal and Classic look extremely similar. They almost look like one font even though they have different shapes of the font. The proportions look the same.
Use Rumi and have fun with the friendly letters. Using capitals as a headline and play with the font.
Combine Montreux Classic and Eckhart.
Eckhart color is a very ornamental font paired well with Qualion Text Italic.
See other examples below with their font pairings:
Congratulations, you have successfully learned font pairings to enhance projects.