A critical but often daunting task when developing or refreshing your branding is choosing (a) typeface(s) that will elevate your identity. There are thousands of typefaces out there, and many are even free. It can be difficult to know where to start, but there are some good strategies I like to use for narrowing down the choices.
That’s right, typefaces! All those options in the “Fonts” dropdown that you scroll through trying to find something unique and cool until finally settling on Arial or Calibri (*shudder*). In this post-moveable type world, typeface and font have become rather interchangeable terms, and truly at this point, it’s a distinction without much difference. A typeface describes a family, or style, of fonts. For example, Garamond and Helvetica are typefaces, while Garamond Book and Helvetica Black Italic are fonts.
Each typeface has its own unique characteristics that set it apart. Some of these characteristics are purely aesthetic, others serve a very specific purpose. Some examples:
Those little nubs at the ends of the strokes of letters. They have evolved from an artifact of rendering letters to a mostly stylistic element, though there are some who argue that typefaces with serifs are easier to read in large blocks of text. Sans-serifs, obviously, don’t have these.
This is simply the average height of the top of the lower-case set of letters in a font. Not “t” or “l”, but rather the “a” or “o”. A typeface with a taller x-height is highly legible at small sizes, and it also feels a bit more open and friendly. A lot of modern sans-serifs have taller x-heights.
Contrast refers to how much the strokes of the letters vary between horizontal and vertical strokes. Typefaces with higher contrast have a more organic feel, mimicking the pressure and angle of lines drawn with a brush.
These characteristics help each typeface impart subtle information to your audience that can give a broader context to the message you’re trying to communicate. A sans-serif typeface with a very high x-height can have a modern, Art Deco feel. Slap some serifs on it and it becomes more Art Nouveau. Our minds make connections to things we’ve seen in other contexts, so while differences between typefaces may be subtle they can have subliminal effects that influence your audience’s mood.
Now that you’ve started to identify the unique (and sometimes subtle) differences between typefaces, it’s time to consider what will work for your brand. This means considering both the visual messaging as well as the tactical usage of the typeface(s).
Let’s say you’re starting a fashion blog, and you need some fonts with which to make a tasteful cover layout for a summer style lookbook. Your brand is hip and pretty trendy (like most in the fashion world), and you need two fonts that will speak to your audience with this voice.
The name of your blog, “Fashion Trendy”, needs to be legible but it’s not the focus of the piece. Popular typefaces these days skew towards geometric, sturdy sans-serifs. Typefaces like Futura (popularized by Wes Anderson), Gotham, and Brandon Grotesque are among some of the most popular on the internet and all have their roots in signage lettering from the early 20th century. To piggyback off this trend while still doing our own thing, let’s set the name of the blog in Avenir, a slightly more modern typeface with similar characteristics and strong, square capital letters. We’ll also give those letters some wide tracking to open it up and make it more of a design element.
For the title of the piece we have some options, so let’s practice some font-pairing. We want to avoid being too similar in style to Avenir, and we want to create a sort of balance on the page when both fonts are present. We also want to compliment the characteristics of the brand as well as the voice of the piece itself.
In example 1, we contrast the geometric Avenir with a rough brush script font, Bromello. It has a subdued, whimsical energy, and since we’ve set the tracking and leading (horizontal space between lines of text) kind of tight we have some nice overlapping and ligatures (connections between letters). This adds some visual interest and contrasts the very mechanical strength of the Avenir text.
Example 2 has a bit more of a classic pairing my using Modern No. 20. This very high-contrast serif is known as a modern or Didone serif and its style has seen lots of use in the world of fashion magazines such as Vogue and Harper’s Bazaar. It echoes some of the structural characteristics of Avenir, using uniformly wide characters that stack well.
Finally, example 3 shows how a poor font choice can really negatively affect your design. I’ve chosen Haettenschweiler, the better made older sibling of Impact. It’s very bold. It’s similar to Avenir in all the wrong ways; it’s very bold and heavy, it has a more uniform contrast, and it has no serifs. It weights the bottom of the page down and feels like someone is yelling at you, or trying to sell you a used car. If we were going for a modern, Andy Warhol kind of feel, this typeface might work with some different graphics to create some interesting contrast and energy, but in this context, it just doesn’t work.
In this article, we’ve just scratched the surface of the world of typography. It can be argued that type is the basis of modern design, and it plays a tremendous role in branding. Typefaces are the building blocks, and in the next article, I’ll expand a bit more on pairing typefaces while also talking a bit more about layout and creating a visual hierarchy with type.