Hey Visitor what is Typography? Typography is, quite simply, the art and technique of arranging type.

Creating visually interesting typeface combinations is more of an Art than a Science. Like any Art, there are no absolute rules to follow. However, there are some best practices that you should follow when choosing font combinations.

Click CONTINUE to learn about the history of Typography and how to identify various typefaces.

HISTORY OF TYPOGRAPHY

Understanding the history of typography will help you better identify typefaces and help to give some context on when certain typefaces should be used for a particular design.

INDENTIFYING TYPEFACES

We will be spending a lot of the second semester exploring and designing with Typography. For some of you it may seem dull or boring at first, but Typography is essential to good graphic design. You will need to be able to correctly identify a font’s style (oldstyle, modern, slab serif, sans serif, script, and decorative) and know when to correctly use each.

Click CONTINUE to explore how to choose typefaces and the importance of font pairing.

PSYCHOLOGY OF TYPOGRAPHY

The first step in choosing a typeface to use in your designs is to understand that certain typefaces create a certain mood. Some are bold, some are elegant, some are fun, etc. Check the infographic below to get a feel for when to use certain typefaces.

FONT PAIRING

Most layouts and designs look best when at least two fonts are used to create visual hierarchy. The trick is picking two fonts that will work well together. This is called Font Pairing. The trick with Font Pairing is trying to create contrast and unity at the same time. Here are some easy to remember tips from choosing good Font Pairings from VISME.

[body]

SANS SERIF Heading + SERIF Body Copy

This is the most common font pairing style designers will use when they want to make their typography look instantly more polished and professional. Why does this font pairing work so well? Firstly, the pairing has high contrast, which creates interest and stimulates the eye. Secondly, this pairing feels at once both classic and contemporary, which makes it suitable for all sorts of layouts. Finally, bookish serifs tend to be easy to read, while sans serifs add a more modern, sophisticated flourish, making it a pairing that’s both functional and stylish.

[/body]

[body]

Heading + Body Copy from the SAME FONT FAMILY

Many fonts belong to a typeface family—a group of fonts which vary in weight (e.g. bold, italic, book etc) but ultimately have the same base design. Some font families contain as few as three fonts, while others might extend to include dozens of fonts. These larger font families are known as ‘superfamilies’.

Pairing two fonts taken from either the same family or superfamily is a quick route to creating a design that feels pulled-together and elegant. The success of this sort of pairing rests on the shared similarities between the chosen fonts, rather than contrast, which has a calming effect on the eye. For layouts which require a more traditional, formal or conservative style, this sort of font pairing is the perfect choice.

[/body]

[body]

Contrast FONT SIZES Between Heading & Body Copy

Another way to achieve contrast is to get enough difference in point size between the various fonts. Typically between headings and body copy. The text on the left, for instance, uses a 24-point font for the header and an 18-point font for the body copy. There’s too little contrast in size, which makes it harder for the reader to distinguish what’s most important.

The order in which you read information should be clearly defined by a visual hierarchy in your design.

[/body]

[body]

Contrast FONT WEIGHTS Between Heading & Body Copy

Another way to ensure a clear visual hierarchy is to use varying font weights, with clear differences in the boldness of the fonts used. For instance, you can try combining Didot and Rockwell; you see that they simply don’t mesh well together because they both have a heavy presence.

Or, in the example above, you see that the best combination is achieved by matching the heavy Roboto Black with Roboto Light. The key to achieving the right amount of contrast is to understand that fonts are a lot like people: When you mix two with a whole lot of personality or presence, then you have yourself a discordant design. But when you combine an eye-catching one with a neutral or lighter font, you find harmony.

[/body]

[body]

Stick to TWO—MAX THREE–Typefaces

You might be looking too hard for just the right combination. Instead of overthinking it, just stick to two–max three-combinations and, above all, keep it simple. Stick to two typefaces by using a classic sans serif and serif combination. This would potentially produce up to 8 different fonts to work with: normal, bold, italic and bold italic for each typeface.

[/body]

Being able to identify and pair fonts is essential to being a good Graphic Designer. Be creative with your font choices and know when, where, and how to use Typography effectively to create visual interest in a design.

But …. Don’t forget readability and legibility. Professional design isn’t about what you think “looks cool”, but the best design option to deliver the message to the audience.

Click CONTINUE to learn about the Holy Trinity of Typography.

THE HOLY TRINITY OF TYPOGRAPHY

Most people either LOVE Typography or they HATE it. If you love it, it elevates your ability as a designer to a whole other level. Understanding the Holy Trinity of Typography: kerning, tracking, and leading along with contrast is the foundation of good Typography.

What is Leading, Kerning and Tracking?

Try your hand at the Kerning Game. The goal of the game is to adjust the letters for the best kerning (even space between all of the letters). The game features different fonts and words, both of which have a major impact on kerning.

Follow along with Cap in the tutorials below to learn how to manipulate type in Adobe Illustrator:

Once you are comfortable with adjusting kerning, leading, and tracking in Adobe Illustrator click CONTINUE to complete the mission.