The Ultimate Guide to Font Pairing was originally published by Poppy Pack. Source (Canva)

Originally Published by Great fonts are essential to great design. But picking great fonts can seem like an impossible dark art for most people. In the article below I’ll explain the basics of choosing great fonts and then give you my favorite combinations that you can use in your own designs.

There’s a science to applying a heading, subheading and body copy to suit the type of content you’re producing and the message or tone of your brand.

Think we’ve left some good ones out? Share the font pairings you like to use in the comments section, below, and if we think it deserves to be on this list, we’ll add it in and feature your own design.

The anatomy of typography

Before we get started on the list of 30 font pairings, there are two resources you should have on hand.

The first is a super helpful infographic showing the important features of typographic anatomy:

image08

The second is an infographic glossary of typographic terms and compositional techniques, explaining the basics when it comes to typography:

image51

The Design School List of 30 Font Pairings

To make it easier for you to use this guide as a reference material, we’ve arranged our 30 unique font pairings according to the content or publication type they work best for. Again, if you think we’ve missed one that should have been covered, drop a note in the comments’ section, below.

01. Design Publication

1

League Spartan is a modern typeface with strong structure and geometric form. This contrasts well against the elegant and more traditional style of Libre Baskerville. Using a serif for your body copy makes more dense information easy to read.

Creating columns are a great way of containing your text. Shorter lines of text are proven to be easier to read, so when you have limited copy, try to reduce the width of  your text space.

1 Design Publication

02. Resumé

2

Julius Sans One offers a fine stroke, and its broader baseline makes it a great display font. Offsetting well against the more masculine and geometric style of Archivo Narrow, these typefaces offer a good combination for easy readability.

Resumes and formal documents are often lacklustre when it comes to font and font pairings, but they don’t have to be. Combining clean, easy to read typefaces that create hierarchy and balance is imperative when you are trying to convey a message.

2 Resume

03. Sports/Active

7_Sports and Active

A bold, rounded typeface combined with a lighter, condensed style will make for happy font pairing. All three fonts in this example are strong, masculine and easy to read. The bold, wide Archivo Black creates impact, appropriate for a male-directed audience.

Here the text color has been broken up to complement the composition and colors in the background image. Communicating with visual techniques like this brings more symbolism to your designs. The text has been placed to outline the shape of the dancer in the image, guiding the eye to read the design much like a story.

3 Sports_Active

04. eBook

4

Don’t be afraid to use one typeface across your entire brand. Finding fonts like Libre Baskerville that have style variants is a clever way to create nuance without over complicating your designs. This typeface is a classic serif that is beautifully applied as a heading and easy-to-read body copy.

To elaborate on how easy it is to use different font variants, here is an example of Libre Baskerville in action. Using an italic pronounces a word or subheading without having to change font-families.

4 Stylistic Tradition

05. Fashion Retail

5

Bebas Neue is a favorite out there in the design-sphere. Its condensed and clean form makes it excellent to use for headings. Round and narrow typefaces offset nicely against each other. The contrast between Bebas and Montserrat makes for a tidy and contemporary pairing.

Because of the geometric form of this font combination, shapes are nice to use to accompany your type. The lines applied either side of the Season Saletext act as great bookmarks and they align to the width of the heading for stylistic composition.

5 Fashion Retail

06. Sophisticated Style

6

You don’t have to use completely different fonts to achieve a dramatic effect; you can use light and bold versions of the same family for versatility. Lora has brushed curves that make it a very elegant and sophisticated typeface. The effect of using the italic and regular together is charming and feminine.

Apply interesting compositions by finding areas to place text. The background image, here, was scaled to make for copy space to place on the bulb of the orchid. White text was used for the body copy to contrast against the darker petals, while the same fuchsia color was used on the heading and subheadings. The keyline makes for a simple effect, and nicely anchors the copy to the right of the graphic.

6 Sophisticated Style

07. Front page

7

This combination has similarities to pairings you would find in newspapers or publishing. Open Sans Extra Bold grabs the attention of your audience, much like that of a headline.

These typefaces are tough and straight to the point. The light Cooper Hewittapplied in uppercase is a great contrasting subhead or chapter marker, as is the easy-to-read PT Sans for body copy. These typefaces are well balanced and create a solid, well anchored style.

7 Front Page

08. Technology

8

Roboto Condensed is a sans serif typeface with a sans serif reading rhythm, which makes it a great choice for body copy. When applied in bold, the font works very well for a heading. The extended x-height of the typeface enhances the already well condensed effect of the font.

Headings and subtitles don’t have to sit in order, which is why we use scale and size to differentiate them. Create some nuance by using clever spacing between your ascenders and descenders to place some text.

8 Technology

09. Art Gallery

9

With strong arches and curves, Cooper Hewitt is a classic typeface with excellent variations to use to separate your headings, subheadings and body copy respectively.

Finding geometric, contrasting spaces in your background image are an excellent way to place text. Darken your image a little to enhance readability.

9 Art Gallery

10. Invitation and Events

Invitation and events

Playfair Display is an excellent typeface to use for wedding or invitation design. The heavy style of Playfair Display Black offsets beautifully against Playfair Display Italic, creating a harmonious hierarchy.

Color can play a wonderful part in how your typefaces are portrayed— for example, the light tones from the sky in the background image, here, have been used masterfully to soften the text.

10 Quote Graphics

11. Industrial Cool

11

Norwester is an attention-grabbing, geometric font best used for headings. The pairing of NorwesterKollektif and Montserrat is structured and geometric.

It’s always good to consider the essence you are trying to visually communicate with your audience. Using this strong combination to symbolize the physical strength of the product is a nice way to create visual metaphor.

11 Industrial Cool

12. Lifestyle Magazine

12

Source Sans Pro and Source Serif Pro were created to be used as a pair in design and are another excellent example of typographic harmony.

Using a grid is one of the easiest ways to form a clean, structured composition, which creates balance and hierarchy, and color enhances these features by pulling tones in from the images to form consistency and visual harmony.

12 Lifestyle Magazine

13. Bike Shop

13

A fun pairing: Yellowtail is a fat brush script typeface with a mix of connecting letterforms. Contrasting nicely against the bold and more basic style of Open Sans Bold and Open Sans light.

Script typefaces make for lovely, embellished short headings. Too many words are hard to read, so best to keep your application of script to a limited number of words. Take advantage of the slanted form of a script typeface by adjusting the angle a little.

Note: Find the natural composition of your background to place your text, letting descenders drop into spaces and curl around objects.

Bike Shop

14. Exhibition

14

A great combination, the roundness of Raleway contrasts well with the condensed Roboto Condensed. A fine-weighted subheading offsets well against a heavier heading typeface.

Using mixed weights of one typeface is an excellent way to enhance hierarchy and form some nuance. Tying in a color from your background image will connect your audience with the subject matter.

Exhibition

15. Mediterranean

15

Cinzel is considered contemporary, although it was inspired by classical Roman style. With the delicate strokes of Quattrocento and Lora’s curves, this is a fine combination to use for headings or for invitations.

This application is a more traditional and expected style. Finding words that are a similar length or width will create a nice form for the composition of your design.

15 Mediterranean

16. Form and Function

16

Oswald has been redesigned as a web font to work across all digital screens. Teamed with Montserrat Light and Cooper Hewitt, this is a highly functional and easy to read interface font combination.

To amplify a typeface like Oswald, use a contrasting color behind the sections of text. This not only makes it stand out but also enhances the hierarchy between your heading, subheading and body copy. Alignment is important so ensure you place these blocks deliberately.  To create a strong monochromatic style, use black and white elements grouped with a desaturated image.

16 Form and Function

17. Annual Report

17

Reports require less complicated type combinations, which makes this trio a great choice. Don’t be afraid to use a thin typeface as a heading. This is one of the best ways to take advantage of a very fine type weight as it shows off the structure and letterform.

When you are applying fine typefaces, it’s imperative to ensure that it’s easy to read. Applying over a flat color can help with this, forming contrast and letting the form stand out.

Note: Lighter typefaces risk looking weak; combining them with bold colors and additional elements will give your design some gusto.

17 Annual Report

18. Art and Object

18

Kollektif was created in a fight against the fine, clean style of the geometric typefaces of the 21st Century. The disruptor is a round and strong typeface great for both web and print material. Gidole offers a heavy contrast with a fine and condensed form.

Choosing a typeface isn’t just about whether you like it or not, it’s about how the words in your copy look when the typeface is applied. It might be the descender on the g, or the k that hugs the o (like in Kollektif). The tittle on the i is quite round and creates an element of nuance in contrast to the structured and otherwise angular typeface.

18 Art and Object

19. Fashion Magazine

19

Bodoni is known as a classic magazine heading typeface. Massimo Vignellistated that ‘Bodoni is one of the most elegant typefaces ever designed’. The application of Bodoni paired with the contrasting of Montserrat is sophisticated and contemporary.

Finding shapes within your background image is a clever technique to contain your text. Ensure your text color contrasts against the color behind as there may be detail in your image that would make your text hard to read.

19 Fashion Magazine

20. Adventure

20

Merriweather was created specifically for web design and not favored as a print typeface. The combination of bold and regular style variants makes for easy reading and classic aesthetic.

Rules are also made to be broken, so don’t take these sizings and pairings too seriously. Be creative with your placement and style variants, especially for the sake of conceptual design treatments like creating hierarchy and typographic styles.

20 Adventure

21. Zine

21

League Gothic has a distinctive condensed style that has similarities to Archivo Narrow yet offsets well against the round form of Kollektif, acting as a nice barrier between heading and body copy.

Make interesting compositions using shapes, photos and elements. Color is a crucial element to tying in your design elements. Here it acts as a break from the desaturated photos and brings life to the title. Aligned placement of the chunky keyline below the heading forms an anchor and separates the copy copy from the heading. The intro heading  is the same width as the first word of the main heading (Return) for visual harmony. Remember, design is deliberate, so ensuring elements line up is an imperative part of the creative process.

21 Zine

22. Web Design

22

A relatively new typeface, Lato is an excellent choice for user interface website design. Lato’s semi-rounded characters create a warmth, which isn’t always apparent in web fonts. The strong form however, provides a stability and slight masculinity.

Font Fact: Lato means “Summer” in Polish. “Male and female, serious but friendly. With the feeling of the Summer,” – Łukasz Dziedzic, Lato creator.

22 Web Design

23. Financial Advertising

23

Remembering to ensure the typefaces you choose sing the song of the subject, apply an appropriate typeface according to the content. This combination is made up of slab serif typefaces that offer a more organic aesthetic. There are three very defined weights for a good contrast.

These fonts are masculine and bold, therefore great to apply to brands associated with strength and loyalty. Remember to find colors that will enhance the meaning behind your brand or company, here the colors blue and red form that relationship with the product and the typefaces.

23 Financial Advertising

24. Hotel

24

A contemporary and art-deco inspired combination, these geometric typefaces contrast and complement. Sifonn is a strong display font and ideal for headings and less copy heavy sections of text. Applying a high contrast font like Bebas Neue for the subheading forms visual harmony.

This application has been used with a more complex photo grid. Images are placed and cropped deliberately within grids to complement the form of the photograph. Here the text has been placed on the darkest section of the photo and follows the form of the feature within the image.

24 Hotel

25. Cocktail Bar

25

Contemporary and cool, this is an excellent example of using a fine weight typeface for a heading and heavier versions for subheading and body copy. Montserrat has a clean, structured and easy to read form. The application of Montserrat Light for a heading softens the overall effect.

In context, you can see how the fine lines complement the subject well. Because Montserrat is a very light typeface, it’s important to find copy space that doesn’t have too much detail to place it. In addition, make sure there is enough tonal contrast between background and text, to ensure your type is easily read.

25 Cocktail Bar

26. Review

26

Source Sans Pro is inspired by typefaces such as Franklin Gothic, but with a larger x-height. Although a sans serif typeface, it also has a subtle curve which has been influenced by humanist and serif typefaces.

Both Source Sans Pro and Open Sans are typefaces intended to work well in user interfaces. Online newsletters and reports need clean, easy-to-read combinations that clearly define heading, subheading and body copy so readers can scan and identify what they want to read.

26 Review

27. Cinema

27

Six Caps is a condensed and tight display font, ideal to use for a heading. Teamed with Archivo Narrow, this combination makes for a 60s retrospective styling. The clean distinction between the three styles means information will be communicated in order of importance.

Using a keyline or detail to create alignment between rows of text will form a stacking effect. This means your type will become well contained, a good technique to use for finer typefaces or small text.

27 Cinema

28. Manufacturing

28

A sans serif combination – Anton is a reworking of a traditional advertising typeface so designed to capture the attention of an audience with its strong, geometric form. To create more impact, it has been teamed with Open Sans Light for its contrasting visual qualities.

28 Structural

29. Patisserie

Patisserie

Sacramento is a script font best saved for headings. Because of its embellished and connecting strokes, too many words become hard to read. The delicate form of this typeface pairs well with Montserrat Light, for their contrasting style but similar weight.

This combination is very modern and feminine therefore a lovely pairing for the representation of delicacies or sweet food.

29 Patisserie

30. Modern Classic

30

Aileron is an easy-to-read, functional typeface that when applied using different weights will create a consistent and clean aesthetic. This combination is great to use for any formal marketing or documents with dense copy.

30 Modern Classic

Font Fact: The typeface was created with Helvetica in mind but the creator made his own adjustments to give it more curves.

Whether you choose elegant serif typefaces, or more modern contemporary ones, the typefaces you choose create a face for your brand. The successful combination of typefaces not only makes your content easy to read but helps you communicate your message to your audience better.

By putting together essential visual components you form a personality for your brand. Therefore, the application of typefaces is a fundamental step in starting your brand journey. Use this blog post to help you create happy font pairings and to inspire you to go out and push your typographic abilities. It is a great guide to set you out on the initial steps to creating your brand kit!