{"id":4021,"date":"2017-03-04T12:19:57","date_gmt":"2017-03-04T19:19:57","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2017\/03\/how-to-choose-and-pair-typefaces\/"},"modified":"2017-03-04T12:19:57","modified_gmt":"2017-03-04T19:19:57","slug":"how-to-choose-and-pair-typefaces","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2017\/03\/how-to-choose-and-pair-typefaces\/","title":{"rendered":"How to choose and pair typefaces"},"content":{"rendered":"
\"\"<\/figure>\n

The act of choosing two typefaces is probably the first (and often most difficult) task you do when creating a new design. Many people get stuck here, what is ed<\/a> myself included.<\/p>\n

Recently, more about<\/a> I discovered a simple method to pair typefaces effectively and I\u2019d love to share them with you. (Hint: it\u2019s a 9\u00d79\u00a0grid).<\/p>\n

There\u2019s one prerequisite to use this 9\u00d79 grid (which I will reveal shortly)?\u2014?knowing how to categorize typefaces. So, pharm<\/a> let\u2019s start\u00a0there.<\/p>\n

Categorizing typefaces<\/h3>\n

On a broad level, typefaces can be broken down into the six categories. They\u00a0are:<\/p>\n

    \n
  1. Sans-serif<\/li>\n
  2. Serif<\/li>\n
  3. Slab-serifs (or Egyptians)<\/li>\n
  4. Monospace<\/li>\n
  5. Script (or\u00a0Cursive)<\/li>\n
  6. Display (or Decorative)<\/li>\n<\/ol>\n

    You can split typefaces into the first three categories<\/strong> by looking at the style of the\u00a0serif<\/strong>.<\/p>\n

    If the typeface contains no serifs<\/em>, they fall into the sans-serif category<\/em>. (sans means without). Examples of sans-serif typefaces include Helvetica and Gill\u00a0sans.<\/p>\n

    \"\"<\/figure>\n

    If the typeface contains serifs that look blocky<\/em>, they fall under the slab-serif<\/em> category. (slab means a large thick block). Slab-serifs are also called Egyptians<\/em> even though there\u2019s no relationship between the serifs and Egyptian writing. Examples of slab-serifs include Archer and Museo\u00a0Slab.<\/p>\n

    \"\"<\/figure>\n

    Any other typeface<\/em> that contains serifs<\/em> fall under the serifs<\/em> category. Examples include Garamond and\u00a0Georgia.<\/p>\n

    \"\"<\/figure>\n

    Monospace<\/em> typefaces are no strangers to us developers. They\u2019re typefaces whose characters occupy the same amount of horizontal space. They\u2019re often used in tabular data and code. Examples include Menlo and\u00a0Monaco.<\/p>\n

    \"\"<\/figure>\n

    Script<\/em> (or cursive) typefaces are often calligraphic in nature. They\u2019re often used for short headlines, invitations and expressive text. Examples include Dancing Script and\u00a0Lobster.<\/p>\n

    \"\"<\/figure>\n

    Finally, display typefaces<\/em> are typefaces that are only used for large headlines. Many display typefaces are serif and sans-serif versions that are specially tweaked to look good at large sizes. Display typefaces also include ornamentals<\/em> and decoratives<\/em>, which can come in all sorts of form and styles. Examples include Freight Display and Abril\u00a0Fatface.<\/p>\n

    \"\"<\/figure>\n

    Now you know how to classify typefaces into six major categories, which is great! Unfortunately, these major categories are too\u00a0broad.<\/p>\n

    To pair typefaces effectively, we often have to drill in deeper into the subcategories. We\u2019re only going to look at sans-serifs, serifs and slab-serifs as we drill deeper since most typeface choices are made\u00a0there.<\/p>\n

    Things begin to get confusing when you begin to subcategorize. There\u2019s a lot of subcategories, including but not limited to humanist<\/em>, neo-humanist<\/em>, old style<\/em>, grotesque<\/em>, neo-grotesque<\/em>, transitional<\/em>, geometric<\/em> and\u00a0modern<\/em>.<\/p>\n

    Remembering<\/em> the names of these subcategories, differentiating<\/em> between them and correctly placing typefaces in them<\/em> are three major challenges people face, myself included. After much research, I noticed you can group these subcategories into a simple 9\u00d79\u00a0grid<\/strong>.<\/p>\n

    \"\"<\/figure>\n

    To fill up the 9\u00d79; grid, we can look at three properties of the typeface. They\u00a0are:<\/p>\n

      \n
    1. The letterforms<\/li>\n
    2. The stroke<\/li>\n
    3. The tilt<\/li>\n<\/ol>\n

      For the first two properties, it\u2019s often enough to look at letters e<\/em> and o<\/em>. The third one is a layman term I came up with\u00a0?.<\/p>\n

      Let\u2019s look at each of\u00a0them.<\/p>\n

      The letterforms<\/h3>\n

      Pay careful attention to the shape of the letters<\/em>, especially of the letters e<\/em> and o<\/em>. Do they look like circles<\/em> or squares<\/em>? If they do, we can immediately classify the typeface as a geometric typeface<\/strong>.<\/p>\n

      Geometric<\/strong> typefaces contain letterforms that are based off shapes. They look constructed as opposed to handwritten. Because of they seem constructed, they also give off a modern<\/em>, cool<\/em> and impersonal<\/em> vibe.<\/p>\n

      The geometric subcategory is only applicable to sans-serif and slab-serif typefaces. So, we can fill up the 9\u00d79 grid as\u00a0follows:<\/p>\n

      \"\"<\/figure>\n

      Next, we look at the\u00a0stroke.<\/p>\n

      The contrast in\u00a0strokes<\/h3>\n

      The stroke<\/em> of a typeface is lines that make it up<\/em>. Pay attention to these lines. Do they vary in size between different parts of the\u00a0letters?<\/p>\n

      \"\"<\/figure>\n

      When we look at the stroke of a typeface, we\u2019re only interested in using it to categorize serifs<\/em>. This is because it\u2019s rare for sans-serif and slab-serifs to exhibit any difference in the\u00a0stroke.<\/p>\n

      If there\u2019s little stroke contrast<\/em> (little difference between thinnest and thickest part), we can categorize the typeface as an old-style serif<\/strong>.<\/p>\n

      Old-style serifs are serifs that the oldest readable typefaces (according to our current standards. Blackletter comes before it, which is hardly readable now). They mimic handwriting and are thus calligraphic in nature, which causes their letters to tilt more (more on tilt later). Since they mimic handwriting, they\u2019re often seen as real<\/em>, empathetic<\/em> and traditional<\/em>. They are also known as humanist\u00a0serifs<\/strong>.<\/p>\n

      On the other hand, if there\u2019s huge stroke contrast<\/em>, we can categorize the typeface as a Modern\u00a0serif<\/strong>.<\/p>\n

      Modern serifs are deliberately constructed to stand out. Their letterforms often stand upright with zero tilt, which makes them cool<\/em> and impersonal<\/em>, like Geometric typefaces. They are also known as rational serifs<\/strong> and\u00a0didones<\/strong>.<\/p>\n

      Finally, what lies between modern serifs and old-style serifs are transitional<\/strong> serifs. Their stroke contrast<\/em> is distinguishably larger than old-style<\/em> serifs, but not as much as modern<\/em>\u00a0ones.<\/p>\n

      \"\"<\/figure>\n

      After going through the stroke, our 9\u00d79 grid\u00a0becomes:<\/p>\n

      \"\"<\/figure>\n

      Lets move on to the\u00a0tilt.<\/p>\n

      The tilt<\/h3>\n

      If you draw a line through the thinnest points of the stroke, you\u2019ll see the stress of the\u00a0letters.<\/p>\n

      \"\"<\/figure>\n

      If you paid attention so far, you\u2019ll notice that stress can only be used to distinguish serif subcategories because you need to draw a line through the thinnest parts of the letterforms.<\/p>\n

      Although it may seem pointless to look at stress since we already have sorted serifs into their respective categories, I found it helpful to distinguish between sans-serif humanist and grotesque typefaces.<\/p>\n

      Let me\u00a0explain.<\/p>\n

      Letterforms with a diagonal stress (like old-style serifs) look like they\u2019re tilted at an angle<\/em>. Since they\u2019re tilted, they mimic letters that are created by hand<\/em>. (We don\u2019t hold the pen perfectly upright, do\u00a0we?).<\/p>\n

      Although the letters o<\/em> and e<\/em> can\u2019t tell us if there\u2019s any stress<\/em>, we can look at other letters, especially those with shoulders, like h<\/em>, m<\/em> and n<\/em>. If any of these shoulders looks as if they\u2019re tilted<\/em> (or if there\u2019s any stress), we can categorize the typeface as a humanist typeface<\/strong>.<\/p>\n

      An example of a humanist sans-serif typeface that exhibits this behavior is Lucida\u00a0Sans.<\/p>\n

      \"\"<\/figure>\n

      On the other hand, if the letters look like they\u2019re upright, we can categorize them as grotesque<\/strong> typefaces. As you may imagine, grotesque typefaces fall between humanist and geometric typefaces.<\/p>\n

      Just to add to your typography vocabulary, grotesque typefaces are also called grotesk<\/em> or gothic<\/em>, depending on the language. So, if you see these names on a typeface, you\u2019ll know immediately which category these fall\u00a0under.<\/p>\n

      Want an example? How about Aktiv Grotesk?\u00a0:)<\/p>\n

      \"\"<\/figure>\n

      After looking at the tilt<\/em>, we can finally complete the 9\u00d79\u00a0grid:<\/p>\n

      \"\"<\/figure>\n

      And with that, we\u2019re done with categorizing typefaces into their respective categories and subcategories.<\/p>\n

      Before we move onto the next section, I want to highlight that typeface classification is highly subjective<\/em>. Everyone classifies typefaces differently, so you just have to decide for yourself. Some typefaces can fall into multiple subcategories too. One example is Proxima Nova, which can fall into all three sans-serif subcategories at the same\u00a0time.<\/p>\n

      Using the 9\u00d79\u00a0grid<\/h3>\n

      If you search around for typeface pairing rules, you\u2019ll often come across the following two rules, among\u00a0others:<\/p>\n

        \n
      1. Pair sans-serif typefaces with serif (or slab-serif) typefaces<\/li>\n
      2. Pair typefaces from the same\u00a0era<\/li>\n<\/ol>\n

        If you follow the first rule, you automatically create contrast with your two typefaces, which is a good thing. I explain why contrast is so important in my typography course, Mastering Responsive Typography<\/a>.<\/p>\n

        The reason why experts recommend you to pair typefaces from the same era (or even from the same designer) is because these typefaces contain similar letterforms. Similar letterforms create a sense of familiarity through repetition, which is why different typefaces can blend well with each other. (Read this article<\/a> an explanation of why repetition creates familiarity.)<\/p>\n

        Coincidentally (maybe not!), our 9\u00d79 grid helps you identify typefaces created in the same era without remembering the subcategories. It\u2019s used this\u00a0way:<\/p>\n

        \"\"<\/figure>\n

        (This is mind blowing, isn\u2019t it?\u00a0?)<\/p>\n

        Wrapping up<\/h3>\n

        Today, you learned how to categorize typefaces into six major subcategories, and their respective subcategories. You also learned a technique to pair them (using the 9\u00d79\u00a0grid).<\/p>\n

        Now go play around with the technique and let me know your thoughts in the comments!<\/p>\n

        This article as a sample of my responsive typography course, Mastering Responsive Typography<\/a>. You can check it out, and also learn more about typography on my\u00a0blog<\/a>.<\/p>\n

        <\/p>\n

        \n

        How to choose and pair typefaces<\/a> was originally published in freeCodeCamp<\/a> on Medium, where people are continuing the conversation by highlighting and responding to this story.<\/p>\n","protected":false},"excerpt":{"rendered":"

        The act of choosing two typefaces is probably the first (and often most difficult) task you do when creating a new design. Many people get stuck here, what is ed myself included. Recently, more about I discovered a simple method to pair typefaces effectively and I\u2019d love to share them with you. (Hint: it\u2019s a… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":4022,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-4021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t