3 ways to make your typography look way better.
Ever had a client insist on a typeface so bad turning your beautiful design into something that looked like a crime scene?Ever chose a typeface that looked great elsewhere, but didn’t when you used it? There’s a simple fix for that.
I wrote something similar on how any typeface can flourish, if placed in the right environment. “When a flower doesn’t bloom you fix the environment, not the flower.” Typography only flourishes when used right as well. Some work as big titles, others belong in long body copy.
I recently had to work with Frutiger, a well-known typeface by legendary type designer Adrian Frutiger. I learned what I already suspected: that it was designed for legibility, in either small sizes or far away (optically still small). After some research I could find very few to none examples of this typeface being used in all-caps.
I had to use it in two ways it wasn’t intended for: large size titles on a website, in all-caps. Ugh.
A design exploration on how to prevent ugly typography:
Figure out how the typeface is meant to be used
Frutiger in capitals just doesn’t work. It feels like a bloated body text. A little trick I learned over the years: decreasing the letter-spacing makes headings look a lot better.
…unfortunately this doesn’t do the trick for Frutiger. Stills looks awful.
After a bit of researched I learned that Frutiger is mainly used in small sizes, in lowercase.
Frutiger lowercase, with a decreased letter-spacing, works much better. But, still not great. The fact that it’s designed for small sizes is just too obvious.
Use the power of super families.
Especially Super Families, such as SF Pro, contain multiple variants. SF Pro Display being one of them. This means its designed to be used as titles. During the design proces they already adjusted the kerning (amongst other things) to make it more appealing and more pleasant to read as titles.
Freight is the typeface we’re seeing above. Specifically, “Freight Text Pro”. As the name suggests, not meant for headings, but for body text. It’s visually alright, but looks a bit too much like a bloated enlarged body-text.
Freight Display Pro works better. You might notice the only difference is the decreased letter-spacing, and you wonder, can’t I do that with the Freight Text? Well, yes and no.
I’ve decreased the letter-spacing on the left. Even though it takes up as much space as the regular spaced Freight Display on the right, the letters are way too close and overlap.
A great example of the added value of fonts designed for Display.
Use a typeface that is designed for headings
Avant Garde was, apparently, designed specifically for the equally named magazine from the early 20th century. In which they used it in all-caps.
Avant Garde in all-caps does indeed work much better.
I once read that the creator of Avant Garde hated seeing the typeface used for anything other than the word “Avant Garde”, for which it was specifically designed.
In short: do some research to the typeface you’re about to use. What was it made for? How was it used originally?
Mark Vogelaar
Art Director & Designer
Leave a Reply