That’s why your typography choice sucks
Problem definition
Today typefaces matter. You can pick a whatever font-face that represents your brand/product in the best way. Fonts can be super charismatic or extremely subtle. Both matter!
You'll easily implement your choice on your website, mobile app, print, toilet paper package.
Mkay, what’s the problem?
I’ve seen it so many times when the branded typefaces are so hard to use when designing products. You have them on your mockups but everything looks clunky, sloppy. They look great in abstraction but not when used in a composition. And looks like it's you who to blame, right?
Well, probably not. There’s a big chance that the problem is not with your mockups but rather the choice of the branded typefaces that have some chaos deep inside them.
1. Broken font baseline
Actually, broken is a wrong word. In this case it’s so much better to show rather than tell. Have a look at the image below.
Exactly! None of them looks aligned with the icons.
There’s nothing wrong with the picture. In a nutshell the button label and it’s icon are aligned vertically and suppose to look balanced. And that’s where the font baseline becomes a bottle neck. It’s their architecture and you can’t do much to this.
You can add some extra margin to align that... Nah, why would anyone set a pitfall for him/herself? Trust me, you don't need this complexity.
There are lots of good examples though.
The typefaces above are designed with considering new user case that is digital. Their baseline is close to the optical center of the letters. There’s no problems in using those, they’ll look perfect in digital and print domains.
But don’t get misguided, there are plenty modern typefaces with such weird baseline.
So test your typeface pick. Make sure the primary fonts look great when aligned with artistic elements such as icons, dividers, etc. Be a bro to your colleagues that you probably will never work with directly but they’ll inherit your work so support them with some nice typeface picks
2. Not enough font weights
We stepped in the era of Variables. By default all the fonts and their weights are attached to the numbers such as 100 (superlight), 400 (regular), 700 (bold) and others up to 900. The more font weights you have, the more freedom you get.
Hey, do I really need this many?
Well, yes. Think of the future of the brand. Today this may be just a tiny ecommerce but tomorrow you’ll need better distribution and would have mobile apps, bigger ecommerce, company website, marketing presence, etc. So consider as much flexibility as possible when designing brands and styles.
The picture below shows how you can balance your digital and print styles according to the output size of your headings and paragraphs
Variant A has all the headings in Archivo Expanded ExtraBold. Optically, bigger headings look to thick, they miss the visual consistency between the text sizes. They may look appropriate though but, as per me, it’s better to have headings balanced from the optical weight point.
Variant B also uses Archivo Expanded font but each of the headings is in a different weight:
— Small is ExtraBold
— Medium is Bold
— Large is SemiBold
Good news everyone! There are some typefaces with variable font weight
You don’t have to decide if it’s Medium or SemiBold now, just pick a previse value and you’re cool. But today most of the Typefaces don’t have this feature, especially complex charismatic ones. So bare this in mind but don’t expect this to be an industry average.
Sufficient amount of font weights is your creative freedom. Don't think just visuallt, also apply technical requirements to your typeface pick for better flexibility and appearance.
3. Lack of font alternatives
It’s pretty typical when brand guidelines does give you a single typeface for everything. Yes, the font is looking dope, it’s well designed, has sufficient amount of weights, but still…
Let’s be fair, some fonts are hard to read (especially on smaller texts), although the fonts may look hot.
Look at Mailchimp. Their primary typeface Means Web looks great but they don’t overuse that, it's only for bigger headings. Body texts and some headings use Graphik as it’s plain and so much easier to read. They found an optimal balance, having their products branded and at the same time so easy to scan.
If you're struggling picking an alternative font — don't. Just take Inter or Roboto. Both designed to be digital, both have variable font weight and both are subtle enough to be a good addition to any brand.
