{"id":272,"date":"2017-01-13T15:38:07","date_gmt":"2017-01-13T15:38:07","guid":{"rendered":"http:\/\/www.simon-li.com\/design-and-code\/?p=272"},"modified":"2020-12-04T02:23:23","modified_gmt":"2020-12-04T02:23:23","slug":"the-secret-to-nice-typeface-combinations","status":"publish","type":"post","link":"http:\/\/www.simon-li.com\/design-and-code\/the-secret-to-nice-typeface-combinations\/","title":{"rendered":"The Secret to Nice Typeface Combinations"},"content":{"rendered":"\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The Secret to Nice Typeface Combinations\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/soWABnDrksc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n<p>When I asked people what their biggest struggles related to typography were, one of the answers I often heard of was pairing typefaces. We want to use more than one typefaces to make our design more lively and interesting, but for a lot of us, we are not sure which ones go together. When it comes to matching typefaces, there is actually a secret. With this secret, you will be able to create nice typeface combinations.<\/p>\n<p><!--more--><\/p>\n<h3>Pairing Typefaces &amp; Hierarchy<\/h3>\n<p>Besides making our design visually more interesting, a more important purpose of using more than one typefaces is actually to create a hierarchy. Hierarchy implies difference. If there is no difference, there will be no hierarchy. So in order for a hierarchy to be effectively established, there needs to be a lot of difference, or a strong contrast. If you want your typeface combination to be successful, contrast is the secret.<\/p>\n<h3>What We Usually Do<\/h3>\n<p>Often when we try to separate headings from body text, we create contrast in the following three dimensions.<\/p>\n<ul>\n<li><strong>Font weights:<\/strong> we make the headings bolder, or lighter. (Want to know more about how to use font weights wisely? Check out my article <a href=\"http:\/\/www.simon-li.com\/design-and-code\/what-you-can-do-with-different-font-weights\/\">What You Can Do with Different Font Weights<\/a>.)<\/li>\n<li><strong>Sizes:<\/strong> we make the headings larger.<\/li>\n<li><strong>Colors:<\/strong> we assign a different color to the headings.<\/li>\n<\/ul>\n<p>Changing font weights, sizes and colors can create contrast and establish a hierarchy, but there are actually additional dimensions we can play with to add contrast if we have more than one typefaces. Furthermore, playing with them is a lot of fun.<\/p>\n<h3>More Possibilities<\/h3>\n<p>Different typefaces and certain type settings open up other possibilities to generate contrast. Besides font weights, sizes and colors, let\u2019s now look at proportions, letterforms, letter cases and tracking.<\/p>\n<h4>Proportions<\/h4>\n<p>Typefaces have different widths or proportions. Some are narrow and condensed. Some are regular and within the medium range. Others are fat and extended. The following table summarizes the proportions of some commonly used web fonts.<\/p>\n<figure id=\"attachment_280\" aria-describedby=\"caption-attachment-280\" style=\"width: 736px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-280\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/proportion.png\" alt=\"\" width=\"736\" height=\"348\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/proportion.png 736w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/proportion-300x142.png 300w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\" \/><figcaption id=\"caption-attachment-280\" class=\"wp-caption-text\">Categorizing commonly used web fonts based on their proportions.<\/figcaption><\/figure>\n<p>As designers, we can pair typefaces based on their widths. For example, we can use Open Sans Condensed Bold in headings and Open Sans Regular in body text. We can use Montserrat in headings and Source Sans Pro in body text. We can use Oswald, which is condensed, in headings, and use a regular serif or sans serif font for body text\u2026<\/p>\n<figure id=\"attachment_276\" aria-describedby=\"caption-attachment-276\" style=\"width: 964px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-276\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/good-pairings.png\" alt=\"\" width=\"964\" height=\"93\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/good-pairings.png 964w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/good-pairings-300x29.png 300w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/good-pairings-768x74.png 768w\" sizes=\"auto, (max-width: 964px) 100vw, 964px\" \/><figcaption id=\"caption-attachment-276\" class=\"wp-caption-text\">Pairing typefaces with different proportions to create contrast.<\/figcaption><\/figure>\n<p>Note that typefaces that are too condensed or extended are not as readable as regular typefaces, so for body text, it\u2019s better to stay conservative.<\/p>\n<h4>Letterforms<\/h4>\n<p>Letterforms are letters\u2019 shapes. We are actually quite familiar with them because we use them to categorize typefaces. Serif and sans serif are two commonly seen letterforms. Other letterforms include display, handwriting, script etc.<\/p>\n<figure id=\"attachment_275\" aria-describedby=\"caption-attachment-275\" style=\"width: 121px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-275\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/categories.png\" alt=\"\" width=\"121\" height=\"201\" \/><figcaption id=\"caption-attachment-275\" class=\"wp-caption-text\">Categories of typefaces in Google\u00a0Fonts<\/figcaption><\/figure>\n<p>To create contrast, we pick typefaces that have different letterforms. Remember that simple rule we often hear of that asks you to choose a sans serif typeface and pair it with a serif one? It\u2019s actually using the difference between letterforms to create contrast. We can also pick a script\/display typeface for headings, and pair it with a serif or sans serif typeface for body text. The possibilities are endless.<\/p>\n<figure id=\"attachment_274\" aria-describedby=\"caption-attachment-274\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-274\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/big-day-font-pairing-1024x536.jpg\" alt=\"\" width=\"640\" height=\"335\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/big-day-font-pairing-1024x536.jpg 1024w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/big-day-font-pairing-300x157.jpg 300w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/big-day-font-pairing-768x402.jpg 768w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/big-day-font-pairing.jpg 1274w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-274\" class=\"wp-caption-text\">In my web template <a href=\"https:\/\/themeforest.net\/item\/big-day-a-modern-onepage-wedding-template\/18163388?ref=DesignHarbor\" target=\"_blank\" rel=\"noopener noreferrer\">Big Day<\/a>, I paired Dancing Script, which is a handwriting typeface, with Fira Sans, which is an elegant sans serif typeface, because they have a strong contrast in terms of letterforms.<\/figcaption><\/figure>\n<p>The more distinct the letterforms of two typefaces are, the greater contrast we will be able to generate, and the better our typeface combination will be. By the same token, we should avoid pairing two fonts that are too similar in shapes. That\u2019s why you\u2019ll need to be more careful when pairing two sans serif fonts, or two serif fonts.<\/p>\n<figure id=\"attachment_273\" aria-describedby=\"caption-attachment-273\" style=\"width: 874px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-273\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/bad-pairings.png\" alt=\"\" width=\"874\" height=\"93\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/bad-pairings.png 874w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/bad-pairings-300x32.png 300w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/bad-pairings-768x82.png 768w\" sizes=\"auto, (max-width: 874px) 100vw, 874px\" \/><figcaption id=\"caption-attachment-273\" class=\"wp-caption-text\">Pairing two typefaces that are too similar in shapes creates a weak contrast and only confuses the readers. Why not just use one typeface\u00a0instead?<\/figcaption><\/figure>\n<h4>Letter Cases (Lowercase &amp; Uppercase)<\/h4>\n<p>Uppercase words are blocky because their letters share the same height. Lowercase words have ups and downs in their contours because some letters have ascenders or descenders and others don\u2019t. Using this difference, we can create contrast through letter cases.<\/p>\n<figure id=\"attachment_278\" aria-describedby=\"caption-attachment-278\" style=\"width: 465px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-278\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/lettercase.png\" alt=\"\" width=\"465\" height=\"33\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/lettercase.png 465w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/lettercase-300x21.png 300w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><figcaption id=\"caption-attachment-278\" class=\"wp-caption-text\">The shapes of uppercase words and lowercase words are different.<\/figcaption><\/figure>\n<p>If the headings in our document are not long, we can set them all caps to make them appear differently from the paragraphs, which are dominated by lowercase letters. (If your headings are long and involve sentences, you might not want to make them all caps because doing so will decrease readability.)<\/p>\n<h4>Tracking<\/h4>\n<p>Tracking, which is letter spacing, can also be used to create contrast. It is commonly used along with uppercase letters, because extra spaces between uppercase letters can actually make the words easier to read and give them a calm and sophisticated look-and-feel.<\/p>\n<figure id=\"attachment_282\" aria-describedby=\"caption-attachment-282\" style=\"width: 431px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-282\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/tracking.png\" alt=\"\" width=\"431\" height=\"89\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/tracking.png 431w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/tracking-300x62.png 300w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><figcaption id=\"caption-attachment-282\" class=\"wp-caption-text\">Extra letter spacing can make uppercase words easier to read and add a calm and sophisticated look-and-feel.<\/figcaption><\/figure>\n<p>Keep in mind that tracking lowercase letters (adding extra spaces between them) should be avoided, because doing so will break the contours of words and make them hard to read. Additionally, we need body text with no tracking to contrast with headings that have extra letter spacing.<\/p>\n<h3>Boosting Contrast<\/h3>\n<p>Up to this point, we have talked about 7 ways to generate contrast. Let\u2019s summarize them.<\/p>\n<p><strong>Font Weights \/ Sizes \/ Colors \/ Proportions \/ Letterforms \/ Letter Cases \/ Tracking<\/strong><\/p>\n<p>Remember, the more contrast you have, the nicer your font pairing will be. To get a lot of contrast, we can stack them. For example, in my WordPress theme <a href=\"https:\/\/themeforest.net\/item\/jordan-modern-onepage-resume-portfolio-theme\/17542551?ref=DesignHarbor\" target=\"_blank\" rel=\"noopener noreferrer\">Jordan<\/a>, I paired the typefaces Oswald and Merriweather. I used Oswald in headings and Merriweather in body text. Oswald is a condensed typeface. I used it together with all caps and extra letter spacing. By doing so, I created differences in sizes, colors, proportions, letterforms, letter cases and tracking. Lots of contrast, a nice font pairing.<\/p>\n<figure id=\"attachment_277\" aria-describedby=\"caption-attachment-277\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-277\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/jordan-pairing-1024x535.png\" alt=\"\" width=\"640\" height=\"334\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/jordan-pairing-1024x535.png 1024w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/jordan-pairing-300x157.png 300w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/jordan-pairing-768x401.png 768w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/jordan-pairing.png 1249w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-277\" class=\"wp-caption-text\">I paired Oswald and Merriweather in my WordPress theme <a href=\"https:\/\/themeforest.net\/item\/jordan-modern-onepage-resume-portfolio-theme\/17542551?ref=DesignHarbor\" target=\"_blank\" rel=\"noopener noreferrer\">Jordan<\/a>. There is a strong contrast between them because they are different in terms of sizes, colors, proportions, letterforms, letter cases and tracking.<\/figcaption><\/figure>\n<p>Following this principle, we can easily come up with some successful font pairings and some not so successful ones. When you go through each pair of typefaces below, think about why it is successful or not successful using the 7 dimensions we talked about previously.<\/p>\n<h4>Successful Combinations<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-281\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/successful.png\" alt=\"\" width=\"343\" height=\"361\" srcset=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/successful.png 343w, http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/successful-285x300.png 285w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/><\/p>\n<h4>Not So Successful Combinations<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-279\" src=\"http:\/\/www.simon-li.com\/design-and-code\/wp-content\/uploads\/2017\/01\/not-so-successful.png\" alt=\"\" width=\"170\" height=\"263\" \/><\/p>\n<h3>Final Thoughts<\/h3>\n<p>Matching typefaces is an important part in typography. I hope that by reading this article, you will learn that contrast is the indicator of successful typeface combinations and know how to pair fonts more effectively. Have fun pairing typefaces!<\/p>\n<p>Did you like this article? If yes, share it with your friends. You can also <a href=\"https:\/\/twitter.com\/simonlidesign\" target=\"_blank\" rel=\"noopener noreferrer\">follow me on Twitter<\/a>.<\/p>\n<h3>Survey<\/h3>\n<p>What are your struggles related to typography? Answer this <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLSfR4XcAyyg_9qeQBxNUMoXkf1Bm5eXu6p2XgGCG268NE9AoZw\/viewform\" target=\"_blank\" rel=\"noopener noreferrer\">short survey<\/a> and let me know. It will help me create the best content related to typography for you.<\/p>","protected":false},"excerpt":{"rendered":"<p>When I asked people what their biggest struggles related to typography were, one of the answers I often heard of was pairing typefaces. We want to use more than one typefaces to make our design more lively and interesting, but for a lot of us, we are not sure which&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[94,87],"tags":[15,13],"class_list":["post-272","post","type-post","status-publish","format-standard","hentry","category-videos","category-visual-design","tag-design","tag-typography"],"_links":{"self":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/comments?post=272"}],"version-history":[{"count":18,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/272\/revisions"}],"predecessor-version":[{"id":719,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/posts\/272\/revisions\/719"}],"wp:attachment":[{"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/media?parent=272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/categories?post=272"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.simon-li.com\/design-and-code\/wp-json\/wp\/v2\/tags?post=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}