A Crash Course in Typography: Principles for Crash Course in... A Crash Course in Typography:...

download A Crash Course in Typography: Principles for Crash Course in... A Crash Course in Typography: Principles

of 26

  • date post

    23-May-2020
  • Category

    Documents

  • view

    1
  • download

    0

Embed Size (px)

Transcript of A Crash Course in Typography: Principles for Crash Course in... A Crash Course in Typography:...

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 1 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    A Crash Course in Typography: Principles for Combining Typefaces Cameron Chapman

    When combining typefaces, there are a couple of important principles you’ll need to keep in mind, namely contrast and mood. Effectively combining typefaces is a skill best learned through practice, and trial-and-error. Once you’ve mastered the principles covered here, you’ll have the tools you need to try out combinations while making educated guesses about what will and won’t work together. [fblike] Here, we’re mostly covering combining two typefaces, as you would for body copy and headlines. In the next part, we’ll cover combining more than two typefaces for things like navigation, image captions, and more.

    Contrast

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 2 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Contrast is one of the most important concepts to understand when it comes to combining typefaces. Without proper contrast, typefaces tend to clash, creating a random, scattered look to your designs (and not in a good way). Creating proper contrast relies on a few principles, all of which are discussed below.

    But first, what exactly is contrast? Contrast is the amount of difference between two typefaces. Typefaces that are too similar tend to clash. Your mind doesn’t instantly recognize that they’re different typefaces, and when it finally does, it’s jarring. Typefaces that are too dissimilar can appear haphazard and accidental, which can be just as jarring.

    Weight

    The weight of a typeface plays a huge role in its appearance. We often think of weight in terms of “light”, “regular”, “medium”, “bold”, etc. But different typefaces have varying weights to begin with. Combining typefaces based largely on weight is a fairly straight-forward way of creating typographic contrast.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 3 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    You’ll want to look for typefaces that have noticeable difference in weight, without being too extreme. Very extreme differences in weight need to be made up for with similarities in other respects, particularly structure and style.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 4 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Style and Decoration

    The style of a typeface has a huge impact on how it’s received. Generally, when working with styles, you’re going to be either using regular or italic styles. Underlines are also used, but in web design, they should only be used for links (otherwise, they’re confusing). Other decorations include things like outlines or drop shadows, both of which can be used to unify varying typefaces.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 5 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Style and decoration can also be used to create contrast within a type family or typeface. Combine regular and italic fonts, varying weights, and things like shadows or outlines to create variation within a font family and sufficient typographic contrast.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 6 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Scale and Hierarchy

    The scale of typefaces, or their size relative to one another, is another important factor in combining typefaces. The hierarchy of different elements within the design is greatly influenced by the scale of the typefaces used. For example, your headings should obviously be larger than your paragraph copy. To the same end, your H1 headings should be larger than your H2 headings, and so forth.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 7 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    As a general rule, your hierarchy should start with your H1 heading being the largest, and your meta information or captions should be the smallest. You need to balance the differences in scale with differences in weight and style, too, so that you don’t have too much variation in size between your largest and smallest fonts.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 8 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Classificiation

    In general, when combining typefaces, you’ll want to choose ones that aren’t from the same classification. Combine a serif and a sans-serif, or a serif and a script, etc., and you’ll have a much easier time coming up with a combination that has proper contrast and doesn’t clash.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 9 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Combining typefaces within the same classification is sometimes possible, but there are some extra considerations. For one, you want to find typefaces that are different enough that they’re immediately recognizable as different typefaces, while also using typefaces that have similar moods, structures, and other factors that tie them together. To some extent, trial and error is your best bet for finding typefaces within the same classification that can work together.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 10 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    One trick is to choose typefaces that are in the same general classification, but fall under different sub-classes (such as a slab serif and a modern serif, or a geometric sans serif with a grotesk). This provides more contrast right from the start.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 11 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Structure

    The structure of a typeface plays a huge role in how it works with other typefaces. You either need to choose typefaces that have very, very similar structures, or very different structures. Letterforms that are only a bit similar are going to clash. Typefaces that are very different in other ways can be unified by their similar structures, though the reverse rarely works as well.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 12 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Look at the letterforms side-by-side and see if they share a similar shape or other factor (such as x-height). It’s better to go with wildly different structures than structure that’s almost the same but not quite.

    Color and Texture

    When you need to add visual contrast or unify disparate typefaces, the use of color and texture can do wonders. For example, when you need to add contrast among typefaces that are nearly identical (or within a single type family), changing the color of some elements instantly adds interest. Adding texture has the same effect.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 13 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Alternatively, if you have wildly different typefaces, color and texture and unify those typefaces, creating a harmonious look. The principles of color theory still apply to typography, so be sure you don’t go overboard combining colors.

    Extreme Contrast

    Extreme contrast can be a great option if you’re working with display or script typefaces. In these instances, it can be difficult to find typefaces with good contrast that aren’t too dissimilar. So rather than trying to do that, go for completely different typefaces. Try combining a rather simple typeface with something more elaborate for the best results, rather than two elaborate typefaces.

  • 6/6/17, 12(27 PMA Crash Course in Typography: Principles for Combining Typefaces - noupe

    Page 14 of 26https://www.noupe.com/essentials/icons-fonts/a-crash-course-in-typography-principles-for-combining-typefaces.html

    Mood

    The mood of the typefaces you select is vital to the way they work together. Mood can be anything from formal to casual, fun to serious, modern to classic, or anything in between. This is where a lot of people run into trouble with combining typefaces. Selecting typefac