How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips

This saying applies to all aspects of life, but is especially applicable to art and design. The thing about design — in this case, font combination — is that even though there are some logical rules and best practices to follow, there are still no absolutes. Each rule can be shifted, nudged, bent or broken to serve a purpose in creating a masterpiece. Very few of the guidelines are set in stone, so you have to study the subject AND trust your design intuition. Great font combinations are crucial to a great layout. However, choosing the typefaces to pair up can be a challenging and frustrating task, especially for beginners. Typography is the foundation of web design as it is 95% of the overall layout. The first thing you have to remember is there’s a science behind typography. Each font pairing must be a vehicle in delivering the context or message of the design. It’s more than just the aesthetics of the layout. It’s an essential element in creating the overall look and feel of the project. Obviously, font pairing plays a pivotal role in web-related design projects. To build a great web design, you have to capable and knowledgeable enough to make choices and judgments with regards to fonts and font pairings. The good thing is there is plenty of font combinations readily available online. You can use these resources to find the typeface that will match whatever design or concept the project calls for. You can also use them as practice tools to sharpen your font knowledge. Having said that, it’s still important to learn how to create your own font combinations, particularly if you want a career in a design-related industry. Mastering font combinations demands time, effort, continuous study and the use of premium tools and resources. All of these elements are important to help you create a pairing that not only looks good in print, but also feels right. Here are some rules, best practices, sample pairings and a list of tools and resources to help you master the ins and outs of combining fonts.

Pin this for later!

I. The Basics

1. Work with complementary fonts.

Majority of fonts have a distinct character or mood: playful, straightforward, intense, comical, elegant and so on. Make sure the moods of your font selections go well with your design goal. For example, a curved, fun-looking typeface may be suitable for a kiddie party invitation, but not likely for a business card. Keep in mind that “introverted†and “extroverted†fonts create well-adjusted output when appropriately combined. If one of your fonts has a “strong character” (known as the display font), combine it with a neutral or simple font for a workable and proportionate design. The selection process when mixing fonts can be technical, but more often than not, it’s a trial and error method. Relying on font knowledge and gut feeling will help you develop an eye for figuring out what is effective and what is not.

15 Pre-designed Font Combinations

Free Font Pairing Cheatsheet

We’ve curated a list of font styles that work well together so you can design interesting type lockups in minutes.

Download the cheatsheet

2. Keep it simple, in general.

A basic rule to live by, regardless if you’re a font expert or a newbie, is to keep things simple. Avoid using too many fonts. Much like blending one too many colors on a palette may produce mud, combining several fonts on a page may lead to a confusing message. That being said, using more than two fonts on a page can still produce a stunning finish. Also, at times, multiple fonts are necessary. It all boils down to starting with a simple approach: start by using a minimum number of typefaces, and end with smart editing.

3. Set up visual hierarchy.

Use newspapers and magazines as resource materials on how to establish visual hierarchy. These traditional publication formats put together fonts in a manner that aesthetically differentiates various textual elements (headline, intro, image caption, body copy subheads, pull quote, byline). Factors like size, weight, and spacing all play a role in the way the eye must navigate the page and perceive which part is the most important. The same principles apply when combining fonts. Think about the part/s you want readers to check out first. Alternatively, you can choose the details that are most important and need to be noticeable at first glance. Afterward, build your font style and design choices accordingly.

4. Avoid identical typefaces.

Font combinations that are almost identical or too similar may appear like an error – as if you forgot to remove one of the trial fonts when you’re editing the final output. A good example is when you combine two neutral Sans-Serif typefaces. The output creates a discord where viewers will sense that something is not right with the design even if they can’t pinpoint what it is. As with any combination, the elements should complement each other, yet still produce a yin-yang feel to it.

5. Stick with a family of fonts.

This may seem like a contradiction to the tip above, but another method to create a combination that works is to use a single typeface family. To avoid look-alike errors, make sure to pick a family that comes in different styles, weights, sizes, and variations. Extended font families with ample variance enable you to conveniently establish visual hierarchy, while simultaneously making sure that you still produce a harmonized creative output.

6. Think of context.

The placement of your design helps you identify the fonts that work well with your project. The size of the text must be large enough so viewers can easily read the context. When it comes to small typefaces, clarity is particularly essential. More often than not, with small fonts, the text is in capital letters, and there’s generous spacing in between. These design choices emphasize legibility. Besides font size, styles also have an effect on readability. An excellent kick off point for picking typefaces that suit the context of the design is to complement the features of the message with the identified characters or moods of a typeface. Context may also be categorized by genres and time periods. Researching into the background of a typeface, like how it’s been applied in a cultural context in the past, can help you in assessing if it’s an ideal starter font or secondary font for the project.

7. Create contrast.

The concept of contrast is to merge a variety of ideas and strategies you should consider, including visual hierarchy and how fonts harmonize with each other. Creating contrast is possible in different ways: using style, size, weight, color, and spacing, to name a few. For example, a large, bold font can be combined with a tall, thin one. Even though they are virtually the exact opposite of each other, they work efficiently together mainly because of their difference. The disparities help in creating specific roles for each typeface, enabling them to shine as individual parts of the design.

8. Refrain from creating conflict.

When pairing up fonts, it’s great to create contrast, but not if you produce conflict. The fundamental principle of contrast versus conflict is to remember that just because two typefaces are different doesn’t mean it’s hard-wired that they’ll complement each other. In most cases, fonts that share some features – like when they have the same size – are more inclined to work well together, even if their look or style differs.

9. Choose fonts from the same designer.

Like any other aspect of design, a little insider knowledge can definitely be an advantage. Try pairing up fonts from the same designer. Most typefaces created by the same hand have the same aesthetic components. A simple research online can help you determine which fonts are from the same design stable.

10. Combine Serif and Sans Serif.

Possibly the most tried-and-tested approach in font combination is to mix one Serif and one Sans Serif font. In general, the two work effectively together, especially at contrasting proportions. Also, pairing the two together typically avoids conflict in the design. Keynote: avoid combining two Serifs or two Sans Serifs unless they are drastically different from one another.

II. Best Practices

(ex. Script). It’s hard to get sufficient contrast with this method, and you’ll just create conflict in the process. 12. Provide adequate alteration in point size between the typefaces to produce the right degree of contrast. 13. Experiment with fonts from various categories that have the same x-heights and widths. For example, Times New Roman and Futura don’t jive together since there’s extreme contrast between their x-heights and widths. 14. Take note of what makes your eyes wander. If your eyes are darting back and forth, expect the same reaction from the viewers. If your eyes can’t settle on the design, 99% of the time, something is off. 15. Try out fonts from a particular period, especially if your project involves history or era-centric. This may require a bit of research, but the result is always worth the effort. 16. Generate various typographic colors, which is the general shade a block of type gives off when you squint at it. If your typefaces blur to virtually the same tint, you can alter the font size, spacing, or even replace one with a different size from the same family. 17. Give some thought on how the italics of each font looks like. With the right knowledge, it’s easy enough to pair up fonts using their normal or bold versions. The true test of pairing comes when they’re in their italics. Most of the time, the italic versions of paired fonts create a tension right in the middle of the design. 18. Fonts that are significantly different hardly ever work with a substantial amount of copy, but may be useful in a logo or stringently minimal context. 19. Opt for a neutral contrast where neither typeface overshadows one another. In a neutral selection, both fonts are great in playing their respective roles without creating a design imbalance. Also, the neutral contrast enables the character or mood of each typeface to stand out. 20. Opt for premium, tried-and-tested fonts. Plenty of the free or cheap fonts available online lack one or two important features you may not notice at first glance. 21. Play with font sizes. At particular point sizes, a typeface combination may not look right, but when adjusted to a different point size, everything works great together. 22. Study the fonts on their own. Look up a single typeface and familiarize yourself with how it looks. Repeat the process using a different font. When you can envision these fonts with your eyes closed, your mind can easily sort which fonts may work well with another. This makes your design process quicker and less stressful. 23. Mix it up. Rules and guidelines help to create an appropriate font combination. But, there’s always a wild card when it comes to design, and that’s intuition. Much like a seasoned chef can put together the most unlikely ingredients to create a delicious dish, an intuitive typographer can mix and match unlikely font combinations that usually defy logic but creates a buzzworthy design. 24. Break the rules once in a while so you can see how things go about. There aren’t any absolutes, especially when it comes to design. Learn the rules, so you know how to bend or break them to create something special. 25. This is more of a recommendation rather than a rule. The more you practice and experiment with font pairings, the easier it will be for you to create the right combinations when a project comes along. And just like any skill, proficiency comes with a lot of trial-and-error.

III. Tried-and-Tested Font Pairings

Pairing clean and easily readable fonts that establish visual hierarchy and balance is vital when you want to convey a message. Julius Sans One presents a beautiful, sleek stroke. Its broad baseline makes it an ideal display font. Archivo Narrow, on the other hand, offers a masculine and geometric style. Combined, the typefaces provide easy readability. 27. Rockwell Bold and Bembo Included in the list of classic Slab Serifs, Rockwell, created way back in the 1930s, has intense character and attention-grabbing features especially when used in bold. On the other hand, the more conventional Serif Bembo has a neutral yet versatile look. 28. Kaufmann and NeutraDemi The sweeping, handwritten style of Kaufmann gives a touch of personality to this seemingly odd yet flawless combination. Offsetting the stiff and angular Sans Serified NeutraDemi effectively, these two fonts may not look right in theory but works exceptionally well together in print. 29. Playfair Display Black and Playfair Display Italic Playfair Display is an excellent font for a wedding or party invitation. Its bold variation, Playfair Display Black, offsets wonderfully against its italic version. The combination generates a harmonious visual hierarchy. Keynote: when using a single font with variances, use color to elevate the design. 30. Yellowtail and Open Sans Bold This is a fun pairing. Yellowtail is a chunky brush script font with a touch of linked letterforms. To create a beautiful contrast, pair it with the simplicity of the Open Sans Bold. The combination is ideal for uncluttered print ads. Script typefaces, like the Yellowtail, result in charming, embellished short headings. 31. Helvetica Neue and Garamond This is a favorite duo used in various context. The ubiquitous Helvetica is perfect for headlines while the classic style of Garamond is perfect for text. To establish visual hierarchy, simply mix up the weights and sizes between the two. 32. Renault Light and Apex- New An excellent pairing for corporate use, the Renault and Apex-New combo has an almost identical ratio of x-height to body height. The likeness results in an uncomplicated collaboration between the modern-day Sans Serif and the distinguished Serif. 33. Kollektif and Gidole Kollektif was designed as a contradictory typeface to the sleek, clean style of the geometric fonts that dominate today’s typography. It has a round and solid look ideal for web and print materials. On the other hand, Gidole presents a strong contrast with its fine and compacted form. 34. Trade Gothic Bold and Sabon This combination is highly effective when Trade Gothic is used in bold for a noticeable headline, with the classic feature of Sabon used for the body copy. Both fonts are exceptionally legible with their respective tall x-heights. 35. Raleway Heavy and Roboto Condensed The combination of Raleway and Roboto is best for image captions at exhibitions and art showings. The roundness of Raleway Heavy contrast effectively with the compacted Roboto Condensed. Using mixed weights is an excellent approach to boost visual hierarchy and form a kind of nuance.

IV. Tools and Resources

36. Google Type

With about 650 free fonts available from Google Fonts, Google Type is the resource you wouldn’t want to overlook. The fonts from the massive Google Fonts library helps both seasoned and newbie typographers in choosing the appropriate typefaces to pair up while also offering inspiration along the way.

39. Type Genius

Type Genius is like a font finder for any design project. The tool is available for free. You start by keying in a particular typeface, and the system will find the best possible pair for it.

38. Fonts in Use

Fonts in Use is a collection of fonts categorized by design and use. Selections are available for website, branding, formal documents, posters, magazines, among others.

39. Typ.io

Each of the typefaces found in Typ.io is labeled with related keywords and key phrases. Through these tags, the system can help you find complementary fonts. The tool also features font combination samples for websites.

42. Adobe Typekit

Typekit is a subscription-only tool that combines different typefaces for a hassle-free and quick font search and match-up. The tool is available for free with limited font collections and a paid plan for extensive and rare font selections.

43. Typespiration

Typespiration is a great font-related website that features designer-contributed text samples. Detailed under each sample is the list of fonts used as well as their color combinations. Some designers even include the CSS code of the sample design for an easy copy-paste feature.

42. Blender

This font pairing tool is an ideal choice for bloggers, in particular for the new ones. The app enables easy font pairing for headlines, subheadings, and text copy. For a more personal look, users can choose the font family, size, width and height directly from Blender’s website.

43. Matcherator

Powered by Fontspring, Matcherator helps in figuring out which font is best used for an image. The app lets users either download an image from their computer or use an image URL. It will then find the exact font found on the image or list the best alternatives.

44. Typewolf

TypeWolf is a collection of stunning type samples found online. Each sample includes a list of the typefaces used as well as a link to the sample website.

45. Font Combinator

This tool has been built to allow previewing of font combinations in a fast, browser-based manner. You can edit any of the type on this page in order to preview any particular text. In the controls at the bottom, select the element you want to modify, and then play!

V. Tutorials for The Road Ahead

46. A Beginner’s Guide to Pairing Fonts 47. The Big Book of Font Combinations 48. Best Practices Of Combining Typefaces By Douglas Bonneville 49. The Only Font Pairing Guide You’ll Ever Need For Your DIY Designs by Heidi Pun 50. Fontpair.co – Helps you pair Google Fonts together. When it comes to font combinations, you will find rules, best practices, and techniques, but still with a free leeway to bend or break them. Like any other design process, it takes constant learning and practice for you to master the craft. It is also important to remember that it’s impossible to apply all the rules or ideas at once. Rather, learn the rules by practice and by heart so you can learn how to quickly assess possible font pairings. Make an effort to study and be updated on the ins and outs of font pairings. Experiment and take risks. Trust your gut feeling. Sometimes, it’s only by listening to your intuition that you’ll see if something works, even if it logically and technically shouldn’t. If a pairing isn’t working even if you follow the rules, figure out why and learn from it. Use these typography basics as your starting point and then explore some more.

Products Seen In This Post:

-Garris-Regular… See More