{"id":26493,"date":"2024-01-16T17:29:54","date_gmt":"2024-01-16T14:29:54","guid":{"rendered":"https:\/\/typetype.org\/fr\/?p=26493"},"modified":"2026-05-15T10:17:12","modified_gmt":"2026-05-15T07:17:12","slug":"universitty-lesson-5-choosing-and-mixing-typefaces-theory-and-practice","status":"publish","type":"post","link":"https:\/\/typetype.org\/fr\/blog\/universitty-lesson-5-choosing-and-mixing-typefaces-theory-and-practice\/","title":{"rendered":"UniversiTTy: Lesson 5. Choosing and Mixing Typefaces: Theory and Practice"},"content":{"rendered":"\n
\"UniversiTTy:<\/figure>\n\n\n\n

Designing a font is a complex and meticulous process that requires a lot of experience. However, dealing with a fully crafted font can also take much work. Our clients often ask us how to use a specific typeface better and what other fonts they can match it with. We help choose a suitable type solution for the project, whether it\u2019s an existing typeface from our collection or an entirely new font we design from scratch. In this article, we will share our experience with you.<\/em><\/p>\n\n\n\n

Julia Gonina, TypeType Art Director and the creator of\u00a0TT\u00a0Livret<\/a>, TT\u00a0Fellows<\/a>, TT\u00a0Autonomous<\/a>, and TT\u00a0Ricordi Todi<\/a> typefaces, will tell you how to\u00a0choose and mix fonts for your project. We\u00a0will also figure out why you may need to\u00a0mix typefaces, explain the basic font terminology, and support the theory with examples. In\u00a0the end, Julia will share several helpful resources she uses in\u00a0her work.<\/em><\/p>\n\n\n\n

Why mix typefaces?<\/h2>\n\n\n\n

To begin with, let\u2019s find out whether it\u2019s always necessary to use several fonts in one project or if it\u2019s possible to have only one.<\/p>\n\n\n\n

Frankly speaking, you can achieve great results by using fonts from only one type family. Even one single font can make your project look captivating. One excellent example of this is the website of Elisava Barcelona School of Design and Engineering<\/a>, where we can only see one font style. This looks very stylish.<\/p>\n\n\n\n

\"UniversiTTy:<\/figure>\n\n\n\n

A reasonable question arises: if one font can do the job, why combine multiple? First, by using different font families, you can increase the project\u2019s emotional and graphic depth, as if we would combine various colors and fabrics in clothing. <\/p>\n\n\n\n

Second, it\u2019s possible to use multiple font styles in the project. The most obvious solution is to choose different font options for headlines and text. <\/p>\n\n\n\n

By implementing distinct fonts, you can also highlight key elements in the text or separate its semantic blocks. In addition, it\u2019s a great exercise that helps understand what fonts are and how they influence the reader.<\/p>\n\n\n\n

Type terminology and characteristics<\/h2>\n\n\n\n

Before moving on to choosing and mixing typefaces, let\u2019s cover the basic type terms. If you already have experience and are familiar with the classification and terminology, feel free to skip this section.<\/p>\n\n\n\n

Let\u2019s begin by reviewing the different types of fonts<\/a>.<\/p>\n\n\n\n

There are three main types:<\/p>\n\n\n\n

    \n
  1. If a font doesn\u2019t exhibit contrast (all the strokes have equal weight) and doesn\u2019t have serifs, this font is a sans serif<\/a> (Grotesque);<\/li>\n\n\n\n
  2. If you see serifs, but there is still no pronounced contrast, the font is a slab<\/a>;<\/li>\n\n\n\n
  3. If a font has serifs and high contrast, you are looking at a serif<\/a> (Antiqua);<\/li>\n\n\n\n
  4. And if you remove serifs from an Antiqua, you will get a high-contrast sans.<\/li>\n<\/ol>\n\n\n\n
    \"Choosing<\/figure>\n\n\n\n

    Currently, the most popular font categories are sans serifs<\/a> and serifs, so in this article, our primary focus will be on them. However, there are many more types of fonts. You can find the more detailed font classification in our \u00abLesson 1. Typeface Categories<\/a>\u00bb article.<\/p>\n\n\n\n

    Another characteristic worth paying attention to is how open or closed the aperture of letters is. To understand better what aperture is, take a look at the examples on the left and right. The letter C on the left leans toward closure, while on the right, it aspires to openness. Certainly, between these two extreme points, many intermediate options are possible.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Going a little deeper into the classification, we can combine aperture openness with one more essential parameter: the font\u2019s proportions. Rounded, rectangular, and triangular characters within a font may have varying widths. In the examples above, the letters O and A are noticeably wider than H, E, and S.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Characters may also lean toward equal widths, as shown in the examples below. <\/p>\n\n\n\n

    Thus, various combinations of proportions and openness give multiple font types or classification groups (provided that we significantly simplify the classification). Among sans serifs, the main types are Geometric<\/a> (with rounded geometric ovals and markedly closed aperture), Humanist<\/a> (similar to Geometric in proportions but with a handmade touch and open forms), and Neo-Grotesques (the most neutral of the three, characterized by static typesetting and medium-closed aperture). Without a doubt, there are many blended options among modern fonts, like static proportions typical of Neo-Grotesques combined with Humanist open aperture.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    You should also take note of character shapes. Their numerous variations influence the font\u2019s atmosphere and mood. Take, for example, soft the double-story letters a and g in Humanist sans serifs and compare them to the precise and resonant rounded shapes of the single-story a and g in Geometric sans serifs. Neo-Grotesques here have a distinctive shape of the letter R and the letters g and y terminals. However, this sans serif example also stands out with deliberately crafted forms, so I would rather say it\u2019s display, meaning an expressive font for large point sizes.<\/p>\n\n\n\n

    Let\u2019s focus more on the subdivision into display and text fonts. Text typefaces are easy to read in small point sizes without distracting the reader\u2019s attention with excessive peculiarities. Consequently, these fonts have low or no contrast and neutral character forms. The other category is headline fonts that are expressive enough for large point sizes. They may be marked by high contrast or charismatic glyph forms. As you probably already know, many blended options can be found as well, like when a font isn\u2019t too distinctive but still can\u2019t be comfortable enough to read long texts set in a small point size. These can be specific subheading font styles within one type family, like in TT Livret<\/a>. Or, for instance, bold font styles of even the most neutral sans serifs.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Choosing fonts for the project<\/h2>\n\n\n\n

    It\u2019s time to finish the introductory part and pass over to the main topic. We will begin with some recommendations on choosing a font for your project.<\/p>\n\n\n\n

    There are plenty of fonts to explore, so it\u2019s easy to get lost in this variety of options. That\u2019s why the best thing to do first is narrow the search. The most obvious way to do it will be to establish technical boundaries and requirements. For instance, settle on the supported languages. If you\u2019re looking for Cyrillic-based language support, the range of suitable fonts will shrink significantly. The rest depends on the project. Imagine you know the preferable weight for the font and some specific OpenType features you need. You\u2019re planning to craft a variety of tables, so tabular figures are essential for you. The list can go on depending on the essence of your project.<\/p>\n\n\n\n

    Then, you should ask yourself where and how the font will be used and what functions it will perform in the project. Do you need a text or display font? Does it have to be neutral or attention-grabbing? After that, you can continue specifying your requirements if, for instance, the font must be easy to read in small point sizes and take up little space because it will be used in layouts with narrow columns. These are only some of the most obvious requirements for a typeface. For each separate project, specific requirements must be defined. Let\u2019s consider several real-life examples.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    In the left picture, we can see that the font is the foundation of the whole design\u2014it sets the overall atmosphere. However, readability at small point sizes wasn\u2019t necessary in this case. That\u2019s why a charismatic and lively TT Trailers<\/a> was chosen for the design. The example on the right represents another situation: the font conveys information, remains neutral, doesn\u2019t distract from the photo, and is convenient to read in a small point size.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Here, the font on the left must be comfortable for reading texts while being neat and suitable for small headings. The font on the right is only used for short phrases set in a large point size; that\u2019s why a more expressive look is acceptable for it.<\/p>\n\n\n\n

    By answering these questions, you will already considerably narrow down the font search. Now, you must select a font with the necessary mood from the remaining options. We have already noticed earlier that fonts can either set the overall atmosphere of the project or just support it, accentuating other design elements instead. Keep in mind that every font has a personality, even the most neutral one.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Let\u2019s take a look at more examples. On the left, TT Ricordi<\/a> Fulmini conveys the project\u2019s main idea in the most straightforward way possible \u2014 it\u2019s used in the latest Harry Potter documentary film and works almost like an illustration. The second example shows a \u00abworkhorse font,\u00bb which is functional and doesn\u2019t direct too much attention to itself. But this font doesn\u2019t exist on its own. Its slightly brutal, defined forms make it clear that we\u2019re looking at the website of an IT company.<\/p>\n\n\n\n

    The font\u2019s personality is a rather abstract notion that can be challenging to put into words. In order to organize your feelings, you can break them down into several components you can then analyze separately: the font\u2019s rhythm, texture, proportions, and the forms of its characters. This is the combination of the main elements that make an impression on us when we look at a font. Here are several examples of that.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    TT Autonomous<\/a> seems brutal because of its rough and angular internal space, squared forms, and character weight. It\u2019s also dynamic due to the active and rhythmic diagonals and character width. Its weight, width, and the broad foundations of the letters r, i, and l make it look confident as well.<\/p>\n\n\n\n

    TT Trailers<\/a> seems soft and playful with its inward-bent terminals. However, it\u2019s also pretty eccentric due to being extremely condensed and having a visible texture and noticeable compensators.<\/p>\n\n\n\n

    Finally, TT Ricordi Allegria<\/a> features classical proportions and low contrast with an elegant transition from thin to bold strokes. The font is calm and steady, with only static uppercase characters. All of these traits give TT Ricordi Allegria a premium and exquisite feel.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Defining the character of a display font is not too difficult. Exploring a neutral typeface is another thing: here, you should carefully consider the nuances.<\/p>\n\n\n\n

    In the case of TT Hoves Pro<\/a>, straight terminals in the letters t, r, and y and noticeable horizontal bars at the places of diagonal intersections in N and v give the font a technological quality. The font\u2019s proportions are static, the texture is smooth, and the characters aren\u2019t too narrow, with a lot of white space inside. This creates a solid and confident feeling. <\/p>\n\n\n\n

    TT Commons Pro<\/a>, at first glance, is similar to TT Hoves Pro, but if you look closely, it creates an entirely different feeling. Its arcs are smoother, glyphs are narrower, ovals are more squared, and the shape of the letter o is slightly diamond-like. Consequently, TT Commons Pro seems rather elegant and even a little fragile.<\/p>\n\n\n\n

    TT\u00a0Livret<\/a> Text boasts clear-cut and rigid character forms that seem confident. The font doesn\u2019t feature spurs or\u00a0teardrops, typical of\u00a0more classic serifs<\/a>. Also, the contrast of\u00a0strokes is\u00a0relatively low for a\u00a0serif here. These characteristics give the font a\u00a0modern look. Terminals and stroke endings in\u00a0many glyphs are directed to\u00a0the right and angled slightly upward, like in\u00a0the letters\u00a0a, t, e, and c\u2014this makes the font more dynamic.<\/p>\n\n\n\n

    Tips for pairing typefaces<\/h2>\n\n\n\n

    Everything we covered in the previous section can apply to choosing a single typeface as well as multiple font options for your project. If you desire to pair two fonts, you will have to analyze them in the same manner. Now, let\u2019s explore the ways of marrying two typefaces.<\/p>\n\n\n\n

    Remember that first, you have to determine your project\u2019s goal. Without it, your decisions don\u2019t have any support. After that, you must establish the hierarchy\u2014decide which font will be primary and which will be secondary. For the primary font, I recommend choosing the one you will use the most. However, the final decision depends on a specific project.<\/p>\n\n\n\n

    The key requirement to keep in mind when mixing typefaces is that there must be a clear, visible connection between them. Their similarities and differences must be very obvious. Thus, fonts that are too similar don\u2019t work well together, as well as ones that don\u2019t have a clear connection.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Let\u2019s begin with a bad example. Here, we can see two sans serifs with the same proportions and related forms. Both fonts aren\u2019t display. This is an example of two similar fonts. The purpose of using both of these sans serifs in one mockup is unclear because using only one of them would have sufficed. Mixing sans serifs is quite risky, and many designers don\u2019t recommend doing this. Personally, I don\u2019t mind sans-serif combinations if they are thought through carefully enough. A little later, I will explain what I mean.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Here is\u00a0what could have been done. We\u00a0kept TT\u00a0Commons<\/a> and selected a\u00a0font pair similar in\u00a0nature, proportions, and glyph forms but belonged to\u00a0another type category\u2014slab serifs<\/a>. In\u00a0this case, the differences became apparent. The mix of\u00a0a\u00a0sans serif and a\u00a0serif (slab serif in\u00a0our case) can be\u00a0called classic. You can use it\u00a0without hesitation.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Consider another similar example, but the serif here works in the headline, and the fonts are not that similar already. Here, the resemblance is only perceivable in the typesetting textures. They are relatively dense in both fonts. To clarify, I will give you an example where the textures don\u2019t work so well together.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Here, we used another sans serif, and it\u2019s become evident that its texture is much looser than the serif\u2019s. You can feel the dissonance between them. However, it\u2019s possible to eliminate this feeling without changing the fonts.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    We made the serif a little larger to literally have more white space inside. For the sans serif, we added the context alternate for the letter a, transforming it from a rounded single-story glyph into a double-story one, which made the typesetting a little less airy. Now, the fonts complement each other better as a pair.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Take a look at this example of combining two sans-serif fonts. In this case, we\u2019ve employed a clear contrast in width \u2014 another effective technique in font pairing. It requires precise work with the size of the narrow font. To make its texture less dense compared to the text typeface, the heading should be significantly larger.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Now, let\u2019s look at\u00a0the combination of\u00a0serifs, which is\u00a0also challenging to\u00a0create. In\u00a0this case, we\u00a0use TT\u00a0Ricordi Marmo<\/a> as\u00a0a\u00a0display pair for TT\u00a0Livret<\/a>. Their graphics are obviously different. However, these fonts are similar in\u00a0glyph textures\u2014and this is\u00a0what unites them.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Observe another similar example that features an even more vivid font blend. Here, we can see the difference in widths and expressiveness of the fonts and their similarities in the glyph forms, graphic solutions, and the overall design texture.<\/p>\n\n\n\n

    Finally, we explored various ways of combining font graphics. Now, we can move on to the next level and learn how to blend their personalities. We always choose specific fonts for a reason: to convey information. I always recommend visualizing how they will work together in the mockup. You can even imagine how the fonts would communicate with each other if they were people.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Let\u2019s take the mix of\u00a0a\u00a0display serif TT\u00a0Espina<\/a> and a\u00a0text serif TT\u00a0Barrels<\/a> and replace the latter with TT\u00a0Commons<\/a>.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    In\u00a0my\u00a0opinion, the nature of\u00a0TT\u00a0Espina tends to\u00a0be\u00a0anxious. TT\u00a0Barrels doesn\u2019t calm it\u00a0down. On\u00a0the contrary, it\u00a0seems to\u00a0join TT\u00a0Espina in\u00a0this nervousness. The final combination turns out to\u00a0be\u00a0disturbing. This isn\u2019t good or\u00a0bad\u2014this is\u00a0a\u00a0fact. It\u00a0would work, for example, for an\u00a0atmospheric project with a\u00a0Gothic aesthetic. TT\u00a0Commons, in\u00a0turn, matches TT\u00a0Espina in\u00a0fragility and elegance, but its character is\u00a0also exceptionally calm. As\u00a0a\u00a0font pair for TT\u00a0Espina, TT\u00a0Commons doesn\u2019t suppress it\u00a0or\u00a0amplify its nervousness but serves as\u00a0a\u00a0background for the expressiveness of\u00a0this serif.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Taking things further, let\u2019s try pairing TT\u00a0Espina<\/a> with a\u00a0confident font like TT\u00a0Hoves<\/a>. Curiously, these two typefaces together in\u00a0large point sizes and similarly scaled don\u2019t make an\u00a0impression of\u00a0a\u00a0balanced font pair. The solid nature of\u00a0TT\u00a0Hoves stifles the fragility of\u00a0TT\u00a0Espina. In\u00a0this size, the combination with TT\u00a0Commons<\/a> works better.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    But if\u00a0TT\u00a0Hoves<\/a> is\u00a0made considerably smaller and used for text typing, it\u00a0won\u2019t suppress TT\u00a0Espina<\/a> anymore. This way, TT\u00a0Hoves offers its pair a\u00a0strong shoulder while the visible contrast between the two fonts remains. TT\u00a0Commons<\/a> noticeably underperforms in\u00a0this context.<\/p>\n\n\n\n

    Fonts can have surprisingly deep relationship dynamics!<\/p>\n\n\n\n

    Lifehacks<\/h2>\n\n\n\n

    All this information can be unclear and scary at first. So, if you begin having doubts when choosing and mixing typefaces, feel free to use these lifehacks. First, try combining different subfamilies within one type family.<\/p>\n\n\n\n

    Second, consider fonts designed by one author, as they usually go amazingly well together. See it for yourself.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Here is a classic combination of display and text subfamilies that belong to the same typeface. This is probably the safest option.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    Here, you can see a standard mix of sans serif and serif from one family. However, it\u2019s a challenge to find such comprehensive typefaces.<\/p>\n\n\n\n

    \"Choosing<\/figure>\n\n\n\n

    It\u2019s much easier to\u00a0find fonts created by\u00a0the same author. Each font designer has their signature style. Because of\u00a0this, it\u2019s possible to\u00a0find similarities even between entirely different fonts\u2014in glyph constructions or\u00a0design nature. This means that we\u00a0still work with similarities and differences between two fonts while backing ourselves up\u00a0by\u00a0staying within the bounds of\u00a0a\u00a0particular author\u2019s style. Here, for example, TT\u00a0Ramillas<\/a> and TT\u00a0Commons<\/a> belong to\u00a0different classification categories and have distinct glyph constructions, but they are still similar in\u00a0proportions and overall design elegance.<\/p>\n\n\n\n

    Final thoughts<\/h2>\n\n\n\n

    Let\u2019s summarize everything you need to know to mix typefaces. One essential thing is to learn to analyze fonts to feel and understand them better. This comes with a lot of practice, experiments, and attempts to find out why you like a certain typeface or font pair. Also, looking at the examples set by other projects is always useful. Another essential thing is having a very well-defined idea of your project and the font\u2019s place in it.<\/p>\n\n\n\n

    I called the previous section of the article \u00abtips,\u00bb not \u00abrules,\u00bb for pairing fonts for a reason. No matter how much we wish to define what\u2019s right or wrong, there aren\u2019t explicit rules for mixing typefaces. However, there are basic principles you can use to make your own decisions. After all, with skill and courage, even two fonts that seem incompatible can be made to complement each other.<\/p>\n\n\n\n

    Useful resources<\/h2>\n\n\n\n

    To make it easier for you to dive deeper into the font pair analysis, I will share several valuable resources with you.<\/p>\n\n\n\n

      \n
    • fontsinuse.com. Here, you will find real-life examples of specific fonts in various projects, see how different designers use a typeface you like, and what other typefaces they combine them with.<\/li>\n\n\n\n
    • awwwards.com. This website features excellent examples of modern and bold web typography.<\/li>\n<\/ul>\n\n\n\n

      If you noticed a particular font combination on a website, these two plugins will help you find out what fonts they are:<\/p>\n\n\n\n

        \n
      • Font Ninja is the most functional. In addition to showing font titles, it allows you to try them out for your text.<\/li>\n\n\n\n
      • Sometimes, I switch to the second plugin, WhatFont. Its functions are more basic, but it shows the font titles when you hover over the text.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

        Designing a\u00a0font is\u00a0a\u00a0complex and meticulous process that requires a\u00a0lot of\u00a0experience. However, dealing with a\u00a0fully crafted font can also take much work. Our clients often ask\u00a0us how to\u00a0use a\u00a0specific typeface better and what other fonts they can match it\u00a0with. We\u00a0help choose a\u00a0suitable type solution for the project, whether it\u2019s an\u00a0existing typeface from our collection or\u00a0an\u00a0entirely new font we\u00a0design from scratch. In\u00a0this article, we\u00a0will share our experience with you.<\/p>\n","protected":false},"author":2,"featured_media":26494,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[892],"class_list":["post-26493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-universitty"],"acf":{"show_sidebar":true},"_links":{"self":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/26493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/comments?post=26493"}],"version-history":[{"count":5,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/26493\/revisions"}],"predecessor-version":[{"id":52082,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/26493\/revisions\/52082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/media\/26494"}],"wp:attachment":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/media?parent=26493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/categories?post=26493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/tags?post=26493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}