{"id":43736,"date":"2017-02-27T01:46:08","date_gmt":"2017-02-27T09:46:08","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=43736"},"modified":"2024-04-15T06:05:04","modified_gmt":"2024-04-15T13:05:04","slug":"how-to-combine-fonts","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts","title":{"rendered":"How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips"},"content":{"rendered":"<em>&acirc;&euro;&oelig;You have to know the rules before you can break them.&acirc;&euro;<p>\nThis saying applies to all aspects of life, but is especially applicable to art and design. The thing about design &acirc;&euro;&ldquo; in this case, font combination &acirc;&euro;&ldquo; 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.\n<a href=\"https:\/\/www.smashingmagazine.com\/2012\/07\/one-more-time-typography-is-the-foundation-of-web-design\/\">Typography is the foundation of web design<\/a> as it is 95% of the overall layout. The first thing you have to remember is there&acirc;&euro;&trade;s a science behind typography. Each font pairing must be a vehicle in delivering the context or message of the design. It&#8217;s more than just the aesthetics of the layout. It&#8217;s an essential element in creating the overall look and feel of the project.\nObviously, 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 <a href=\"http:\/\/www.hongkiat.com\/blog\/font-pairing-tools\/\">readily available online<\/a>. 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&acirc;&euro;&trade;s still important to learn how to create your own font combinations, particularly if you want a career in a design-related industry.\nMastering 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.\nHere 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.\n<\/p><h2><span class=\"ez-toc-section\" id=\"Pin_this_for_later\"><\/span>Pin this for later!<span class=\"ez-toc-section-end\"><\/span><\/h2><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054637\/600x1000-pinterest-combine-fonts.jpg.webp\" alt=\"\" width=\"600\" height=\"1000\" class=\"aligncenter size-full wp-image-43911\"><h2><span class=\"ez-toc-section\" id=\"I_The_Basics\"><\/span><strong>I. The Basics<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43752\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054643\/The-Basics-1.jpg.webp\" alt=\"\" width=\"1000\" height=\"667\"><h3><span class=\"ez-toc-section\" id=\"1_Work_with_complementary_fonts\"><\/span><strong>1. Work with complementary fonts.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nMajority 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 &acirc;&euro;&oelig;introverted&acirc;&euro; and &acirc;&euro;&oelig;extroverted&acirc;&euro; fonts create well-adjusted output when appropriately combined. If one of your fonts has a &#8220;strong character&#8221; (known as the display font), combine it with a neutral or simple font for a workable and proportionate design.\nThe selection process when mixing fonts can be technical, but more often than not, it&#8217;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.\n[[cb-fontpairing]]\n<\/p><h3><span class=\"ez-toc-section\" id=\"2_Keep_it_simple_in_general\"><\/span><strong>2. Keep it simple, in general. <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nA basic rule to live by, regardless if you&#8217;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.\nThat 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"3_Set_up_visual_hierarchy\"><\/span><strong>3. Set up visual hierarchy.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nUse 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 <a href=\"https:\/\/www.scribd.com\/doc\/40026597\/Anatomy-of-a-Magazine-layout\">textual elements<\/a> (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.\nThe 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"4_Avoid_identical_typefaces\"><\/span><strong>4. Avoid identical typefaces.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nFont combinations that are almost identical or too similar may appear like an error &#8211; as if you forgot to remove one of the trial fonts when you&#8217;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&#8217;t pinpoint what it is. As with any combination, the elements should complement each other, yet still produce a yin-yang feel to it.\n<\/p><h3><span class=\"ez-toc-section\" id=\"5_Stick_with_a_family_of_fonts\"><\/span><strong>5. Stick with a family of fonts.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nThis may seem like a contradiction to the tip above, but another method to create a combination that works is to use a single <a href=\"http:\/\/www.w3schools.com\/cssref\/css_websafe_fonts.asp\">typeface family<\/a>. 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"6_Think_of_context\"><\/span><strong>6. Think of context.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nThe 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&#8217;s generous spacing in between. These design choices emphasize legibility.\nBesides 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.\nContext may also be categorized by genres and time periods. Researching into the background of a typeface, like how it&#8217;s been applied in a cultural context in the past, can help you in assessing if it&acirc;&euro;&trade;s an ideal starter font or secondary font for the project.\n<\/p><h3><span class=\"ez-toc-section\" id=\"7_Create_contrast\"><\/span><strong>7. Create contrast.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nThe 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"8_Refrain_from_creating_conflict\"><\/span><strong>8. Refrain from creating conflict.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nWhen pairing up fonts, it&#8217;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&acirc;&euro;&trade;t mean it&#8217;s hard-wired that they&#8217;ll complement each other. In most cases, fonts that share some features &#8211; like when they have the same size &#8211; are more inclined to work well together, even if their look or style differs.\n<\/p><h3><span class=\"ez-toc-section\" id=\"9_Choose_fonts_from_the_same_designer\"><\/span><strong>9. Choose fonts from the same designer. <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nLike 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"10_Combine_Serif_and_Sans_Serif\"><\/span><strong>10. Combine Serif and Sans Serif.<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><p>\nPossibly 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. <em>Keynote: avoid combining two Serifs or two Sans Serifs unless they are drastically different from one another.<\/em><em>&Acirc;&nbsp;<\/em>\n<\/p><h2><span class=\"ez-toc-section\" id=\"II_Best_Practices\"><\/span><strong>II. Best Practices<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43753\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054649\/Best-Practices.jpg.webp\" alt=\"\" width=\"1000\" height=\"667\"><strong><em>11. Refrain from combining fonts under the same category<\/em><\/strong><p> (ex. Script). It&#8217;s hard to get sufficient contrast with this method, and you&#8217;ll just create conflict in the process.\n<strong><em>12. Provide adequate alteration in point size<\/em><\/strong> between the typefaces to produce the right degree of contrast.\n<strong><em>13. Experiment with fonts from various categories that have the same x-heights and widths. <\/em><\/strong>For example, Times New Roman and Futura don&#8217;t jive together since there&#8217;s extreme contrast between their x-heights and widths.\n<strong><em>14. Take note of what makes your eyes wander.<\/em><\/strong> If your eyes are darting back and forth, expect the same reaction from the viewers. If your eyes can&#8217;t settle on the design, 99% of the time, something is off.\n<strong><em>15. Try out fonts from a particular period<\/em><\/strong>, especially if your project involves history or era-centric. This may require a bit of research, but the result is always worth the effort.\n<strong><em>16. Generate various typographic colors<\/em><\/strong>, 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.\n<strong><em>17. Give some thought on how the italics of each font looks like.<\/em><\/strong> With the right knowledge, it&acirc;&euro;&trade;s easy enough to pair up fonts using their normal or bold versions. The true test of pairing comes when they&acirc;&euro;&trade;re in their italics. Most of the time, the italic versions of paired fonts create a tension right in the middle of the design.\n<strong><em>18. Fonts that are significantly different<\/em><\/strong> hardly ever work with a substantial amount of copy, but <strong><em>may be useful in a logo or stringently minimal context<\/em><\/strong>.\n<strong><em>19. Opt for a neutral contrast where neither typeface overshadows one another.<\/em><\/strong> 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.\n<strong><em>20. Opt for premium, tried-and-tested fonts<\/em><\/strong>. Plenty of the free or cheap fonts available online lack one or two important features you may not notice at first glance.\n<strong><em>21. Play with font sizes.<\/em><\/strong> At particular point sizes, a typeface combination may not look right, but when adjusted to a different point size, everything works great together.\n<strong><em>22. Study the fonts on their own.<\/em><\/strong> 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.\n<strong><em>23. Mix it up.<\/em><\/strong> Rules and guidelines help to create an appropriate font combination. But, there&#8217;s always a wild card when it comes to design, and that&#8217;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.\n<strong><em>24. Break the rules once in a while<\/em><\/strong> so you can see how things go about. There aren&#8217;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.\n25. 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.\n<\/p><h2><span class=\"ez-toc-section\" id=\"III_Tried-and-Tested_Font_Pairings\"><\/span><strong>III. Tried-and-Tested Font Pairings<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43755\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054654\/Tried-and-Tested-Font-Pairings.jpg.webp\" alt=\"\" width=\"1000\" height=\"667\"><strong><em>26. Julius Sans One and Archivo Narrow<\/em><\/strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43766\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054659\/Julius-Sans-One-and-Archivo-Narrow.jpg.webp\" alt=\"\" width=\"1040\" height=\"788\"><p>\nPairing 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.\n<strong><em>27. Rockwell Bold and Bembo<\/em><\/strong>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43765\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054704\/Rockwell-Bold-and-Bembo.jpg.webp\" alt=\"\" width=\"535\" height=\"140\">\nIncluded 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.\n<strong><em>28. Kaufmann and NeutraDemi<\/em><\/strong>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43764\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054708\/Kaufmann-and-NeutraDemi.jpg.webp\" alt=\"\" width=\"888\" height=\"319\">\nThe 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.\n<strong><em>29. Playfair Display Black and Playfair Display Italic<\/em><\/strong>\n<a href=\"http:\/\/fontpro.com\/playfair-display-font-16523\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43763\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054719\/Playfair-Display-Black-and-Playfair-Display-Italic.png.webp\" alt=\"\" width=\"950\" height=\"476\"><\/a>\nPlayfair 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. <em>Keynote: when using a single font with variances, use color to elevate the design.<\/em>\n<strong><em>30. Yellowtail and Open Sans Bold<\/em><\/strong>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43757\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054724\/Yellowtail-and-Open-Sans-Bold.jpg.webp\" alt=\"\" width=\"1040\" height=\"788\">\nThis 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.\n<strong><em>31. Helvetica Neue and Garamond<\/em><\/strong>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43759\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054727\/Helvetica-Neue-Garamond-Italic-and-Semibold.jpg.webp\" alt=\"\" width=\"500\" height=\"305\">\nThis 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.\n<strong><em>32. Renault Light and Apex- New<\/em><\/strong>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43762\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054730\/Renault-Light-and-Apex-New.jpg.webp\" alt=\"\" width=\"535\" height=\"140\">\nAn 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.\n<strong><em>33. Kollektif and Gidole<\/em><\/strong>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43761\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054735\/Kollektif-and-Gidole.jpg.webp\" alt=\"\" width=\"1040\" height=\"788\">\nKollektif was designed as a contradictory typeface to the sleek, clean style of the geometric fonts that dominate today&#8217;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.\n<strong><em>34. Trade Gothic Bold and Sabon<\/em><\/strong>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43760\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054738\/Trade-Gothic-Bold-and-Sabon-.jpg.webp\" alt=\"\" width=\"535\" height=\"140\">\nThis 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.\n<strong><em>35. Raleway Heavy and Roboto Condensed<\/em><\/strong>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43758\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055126\/Raleway-Heavy-and-Roboto-Condensed-.jpg.webp\" alt=\"\" width=\"1040\" height=\"788\">\nThe 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.\n<\/p><h2><span class=\"ez-toc-section\" id=\"IV_Tools_and_Resources\"><\/span><strong>IV. Tools and Resources<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43754\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055132\/Tools-adn-resources.jpg.webp\" alt=\"\" width=\"1000\" height=\"667\"><h3><span class=\"ez-toc-section\" id=\"36A_Google_Type\"><\/span><strong>36.&Acirc;&nbsp;<a href=\"https:\/\/fonts.google.com\/\">Google Type<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43749\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055144\/Google-Fonts.png.webp\" alt=\"\" width=\"1000\" height=\"516\"><p>\nWith about 650 free fonts available from Google Fonts, Google Type is the resource you wouldn&#8217;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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"39A_Type_Genius\"><\/span>39.&Acirc;&nbsp;<a href=\"http:\/\/www.typegenius.com\/\">Type Genius<\/a><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43748\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055155\/font-combinations.png.webp\" alt=\"\" width=\"1000\" height=\"534\"><p>\nType 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"38A_Fonts_in_Use\"><\/span><strong>38.&Acirc;&nbsp;<a href=\"https:\/\/fontsinuse.com\/\">Fonts in Use<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43747 size-full\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055201\/Fonts-In-Use.jpg.webp\" alt=\"A searchable archive of typographic design, indexed by typeface, format, and industry.\" width=\"1000\" height=\"750\"><p>\nFonts in Use is a collection of fonts categorized by design and use. Selections are available for website, branding, formal documents, posters, magazines, among others.\n<\/p><h3><span class=\"ez-toc-section\" id=\"39A_Typio\"><\/span><strong>39.&Acirc;&nbsp;<a href=\"https:\/\/typ.io\/\">Typ.io<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43746\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055208\/Fonts-that-go-together-.jpg.webp\" alt=\"Be better at typography.\" width=\"1000\" height=\"750\"><p>\nEach 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"42_Adobe_Typekit\"><\/span><strong>42. <a href=\"https:\/\/typekit.com\/\">Adobe Typekit<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43740\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055213\/Typekit-.jpg.webp\" alt=\"Typekit\" width=\"1000\" height=\"750\"><p>\nTypekit 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"43A_Typespiration\"><\/span><strong>43.&Acirc;&nbsp;<a href=\"http:\/\/typespiration.com\/\">Typespiration<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43741\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055217\/typespiration.jpg.webp\" alt=\"A showcase of web typography designs with ready-to-use CSS codes.\" width=\"1000\" height=\"750\"><p>\nTypespiration 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"42A_Blender\"><\/span><strong>42.&Acirc;&nbsp;<a href=\"http:\/\/andreasweis.com\/webfontblender\/\">Blender<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43742\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055222\/The-Web-Font-Blender.jpg.webp\" alt=\"The Web Font Blender\" width=\"1000\" height=\"656\"><p>\nThis 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&#8217;s website.\n<\/p><h3><span class=\"ez-toc-section\" id=\"43A_Matcherator\"><\/span><strong>43.&Acirc;&nbsp;<a href=\"https:\/\/www.fontspring.com\/matcherator\">Matcherator<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43743\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055228\/Matcherator.jpg.webp\" alt=\"The Font Matcherator will find out what the font is in an image. Upload an image and we will match the fonts.\" width=\"1000\" height=\"750\"><p>\nPowered 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"44A_Typewolf\"><\/span><strong>44.&Acirc;&nbsp;<a href=\"https:\/\/www.typewolf.com\/\">Typewolf<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-43744 size-full\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055232\/Typewolf.jpg.webp\" alt=\"Typewolf helps designers choose the perfect font combination for their next design project&acirc;&euro;&rdquo;features web fonts in the wild, font recommendations and learning resources.\" width=\"1000\" height=\"750\"><p>\nTypeWolf 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.\n<\/p><h3><span class=\"ez-toc-section\" id=\"45A_Font_Combinator\"><\/span><strong>45.&Acirc;&nbsp;<a href=\"http:\/\/font-combinator.com\/\">Font Combinator<\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-43745\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15055236\/The-Web-Font-Combinator.jpg.webp\" alt=\"\" width=\"1000\" height=\"656\"><p>\nThis 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!\n<\/p><h2><span class=\"ez-toc-section\" id=\"V_Tutorials_for_The_Road_Ahead\"><\/span><strong>V. Tutorials for The Road Ahead<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2><p>\n46.&Acirc;&nbsp;<a href=\"https:\/\/webdesign.tutsplus.com\/articles\/a-beginners-guide-to-pairing-fonts--webdesign-5706\">A Beginner&acirc;&euro;&trade;s Guide to Pairing Fonts<\/a>\n47.&Acirc;&nbsp;<a href=\"http:\/\/bonfx.com\/the-big-book-of-font-combinations\/\">The Big Book of Font Combinations<\/a>\n48.&Acirc;&nbsp;<a href=\"https:\/\/www.smashingmagazine.com\/2010\/11\/best-practices-of-combining-typefaces\/\">Best Practices Of Combining Typefaces By Douglas Bonneville<\/a>\n49.&Acirc;&nbsp;<a href=\"http:\/\/www.designforfounders.com\/font-pairing\/\">The Only Font Pairing Guide You&acirc;&euro;&trade;ll Ever Need For Your DIY Designs by Heidi Pun<\/a>\n50.&Acirc;&nbsp;<a href=\"http:\/\/fontpair.co\/\">Fontpair.co<\/a> -&Acirc;&nbsp;Helps you pair Google Fonts together.\nWhen it comes to font combinations, you will find <a href=\"http:\/\/create.adobe.com\/2013\/12\/1\/eight_tips_for_combining_typefaces.html\">rules<\/a>, <a href=\"https:\/\/creativemarket.com\/blog\/perfectly-paired-font-combinations-for-bloggers\">best practices<\/a>, and <a href=\"https:\/\/designschool.canva.com\/blog\/the-ultimate-guide-to-font-pairing\/\">techniques<\/a>, 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&#8217;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.\nMake 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&acirc;&euro;&trade;s only by listening to your intuition that you&acirc;&euro;&trade;ll see if something works, even if it logically and technically shouldn&#8217;t. If a pairing isn&acirc;&euro;&trade;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.\n<\/p><p><strong>Products Seen In This Post:<\/strong><\/p><p>    <figure id=\"card-846815-1103078081\" class=\"product-card half no-pinit\" data-product-id=\"846815\" data-index=\"0\" data-width=\"half\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"1103078081\"><\/figure>\n    \n    <figure id=\"card-916623-358341123\" class=\"product-card half no-pinit\" data-product-id=\"916623\" data-index=\"0\" data-width=\"half\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"358341123\"><\/figure>\n    \n    <figure id=\"card-332150-668557321\" class=\"product-card half no-pinit\" data-product-id=\"332150\" data-index=\"0\" data-width=\"half\" data-pin_it=\"no-pinit\" data-module=\"Product Embed\" data-block-id=\"668557321\"><\/figure>\n    \n<\/p><p>\n-Garris-Regular&acirc;&euro;&brvbar; See More\n<\/p><\/em>\n","protected":false},"excerpt":{"rendered":"<p>&acirc;&euro;&oelig;You have to know the rules before you can break them.&acirc;&euro; This saying applies to all aspects of life, but is especially applicable to art and design. The thing about design &acirc;&euro;&ldquo; in this case, font combination &acirc;&euro;&ldquo; is that even though there are some logical rules and best practices to follow, there are still [&hellip;]<\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[37,166],"topics":[],"class_list":["post-43736","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-typography","tag-fonts"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.4 (Yoast SEO v28.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips\" \/>\n<meta property=\"og:description\" content=\"&acirc;&euro;&oelig;You have to know the rules before you can break them.&acirc;&euro; This saying applies to all aspects of life, but is especially\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-27T09:46:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T13:05:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054637\/600x1000-pinterest-combine-fonts.jpg.webp\" \/>\n<meta name=\"author\" content=\"Igor Ovsyannykov\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Igor Ovsyannykov\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-combine-fonts\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-combine-fonts\",\"name\":\"How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-combine-fonts#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-combine-fonts#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2017\\\/02\\\/15054637\\\/600x1000-pinterest-combine-fonts.jpg.webp\",\"datePublished\":\"2017-02-27T09:46:08+00:00\",\"dateModified\":\"2024-04-15T13:05:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/51c825a5f6e7d07e39cb6b4674e2a4f1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-combine-fonts#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-combine-fonts\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-combine-fonts#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2017\\\/02\\\/15054637\\\/600x1000-pinterest-combine-fonts.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2017\\\/02\\\/15054637\\\/600x1000-pinterest-combine-fonts.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-combine-fonts#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips - Creative Market Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts","og_locale":"en_US","og_type":"article","og_title":"How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips","og_description":"&acirc;&euro;&oelig;You have to know the rules before you can break them.&acirc;&euro; This saying applies to all aspects of life, but is especially","og_url":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2017-02-27T09:46:08+00:00","article_modified_time":"2024-04-15T13:05:04+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054637\/600x1000-pinterest-combine-fonts.jpg.webp","type":"","width":"","height":""}],"author":"Igor Ovsyannykov","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Igor Ovsyannykov","Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts","url":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts","name":"How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054637\/600x1000-pinterest-combine-fonts.jpg.webp","datePublished":"2017-02-27T09:46:08+00:00","dateModified":"2024-04-15T13:05:04+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/51c825a5f6e7d07e39cb6b4674e2a4f1"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/how-to-combine-fonts"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054637\/600x1000-pinterest-combine-fonts.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2017\/02\/15054637\/600x1000-pinterest-combine-fonts.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/how-to-combine-fonts#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Combine Fonts: 50 Tutorials, Resources, and Pro Tips"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/43736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=43736"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/43736\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=43736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=43736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=43736"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=43736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}