Despite video and audio messaging becoming more and more prevalent with each passing year, the core of the web remains and will remain text-based. However, the text itself isn’t raw information beamed into our minds and hearts — the way the text looks greatly affects our perception of it. Whether you know the first thing about typography or not, at a glance at the text you get a feeling. Let’s see how to get to the one you need.
In this article, we won’t be delving into typography at large. It’s just one article. The task of picking the right font is complicated and contextual, largely depending on the task at hand, and there are many, many books on the topic. Here we’ll focus specifically on what’s suitable for a digital product today.
The right typeface is what ties the design together and hammers the messaging home. It is at the core of a brand’s personality, all your communication hinges on the typeface. Like everything else, picking the right one starts with knowing your audience and providing what they need. A serious B2B product needs a solid, confident font, like our project for Vauban, the wealth container platform (learn more about our work with Vauban in our Behance case here, and our case story here):
On the other hand, a lifestyle product might need something more refined, something smooth and tranquil. Like the fonts in our project for TL Dental (and here’s the case on Behance, for all the curious-minded):
While there are a lot, a lot of different options available when it comes to fonts, going all the way monospaced options and all kinds of display fonts, here we’ll be sticking with grotesks and serifs. In this article, we’re talking about practically applicable options for your design, and won’t be going off the deep end.
Despite their scary German title, grotesks are merely sans serif typefaces. For the longest time, the common adage was that a digital product needs a sans serif typeface, so we’ve all grown accustomed to them. Hardly anyone today would find a simple and reasonable sans serif grotesque. Here’s Revolut using Basier font for accents and Intercom with Graphik font:
These are good choices, showing confidence and friendly enough positioning. These sans serifs are decent, perfectly readable, completely neutral. These typefaces don’t stand out. They’re perfectly fine. Revolut and Intercom are big, and they can afford to play it safe. A new digital product that’s only just entering the market probably can’t play it safe. Enter serifs.
The big design trend of the past few years is on compassion. Humanity, if you will. Everyone is conscious about everyone, about the environment, about everything really. In typography, this results in harkening back to antiqua typefaces, or serifs (which ties in with a current nostalgia trend, for example, the recent 60s and 70s inspired redesign for Burger King). These typefaces are nuanced and sophisticated and make us think of handmade quality work. Like Recoletta in the headlines of this very article. And they’re especially suitable for lifestyle products. Like the recent redesign of Match:
What used to be a mundane digital brand identity is now tender and elegant, all due to picking the right serif for its communication. While picking a serif for a digital product might seem like a risky bet, it all depends on your positioning and communication. Now there are quite a few digital products displaying serifs proudly. Here are some more examples of the good use of serifs on the web, with Medium, Mailchimp, and Whereby:
Yet in the examples above, serifs are used only as accent fonts, with the paragraphs are all in simple grotesks. While a hardbound novel on good quality paper might look amazing with something out of a book family serif typeface, serifs aren’t so legible on screens. Especially on mobile, which is a big portion of traffic, over half for some products and websites. That’s why while a serif might be just ideal for your brand positioning, it will only headline the show, while most of the workload will remain on a steady grotesk.
The other trick for fonts online is to remove all the unnecessary symbols from the typeface you’re using on your website (you probably don’t need the ligatures, right). It might seem like it wouldn’t do much, or anything, but this optimization technique over and over again lend to pagespeed increases far beyond our initial expectations.
A common practice in typography is to use one font for accents and one for paragraphs. Given that they’re set at different sizes for visual hierarchy, almost any pair can work together. Sometimes, two highly contrasting fonts are used on purpose, for action, unstable feeling, which might work for a more fashionable design. Otherwise, the general guidelines are to pick fonts that have the same size letters, similar details, and consistent goals. All this helps with achieving design consistency and coherency. But if your brand positioning requires to be way bolder, here’s a good example of just going absolutely nuts:
Picking the right font at the foundation also leads to the first thing your customers think of when they think about your brand, your logo. While the logo doesn’t have to be a wordmark or a letterform, it is the most common type of logo, as there are only so many abstract images that could be used to represent yet another new thing on the market. The aforementioned Vauban and Match, Uber, Figma, Notion, et cetera, most digital products really, use wordmarks or letterforms for their logos. Taking the font and tooling a little with it, switching up details a little, playing with kerning, personalizing it a little more creates some great designs. As long as you don’t take text-as-an-image too far and end up with a metal band logo.
With so many typefaces out there, why should you pay for one? While there are plenty of decent fonts available for free, a paid font provides something bespoke, something more specific. The goal of your product positioning is to stand out, and you won’t stand out with a font that everyone has already seen thousands of times. While licensing might be worrisome, if you’re operating on a lower marketing budget you simply won’t use the font all that much.
Picking the right font is a daunting task, and we’ve only managed to get a brief overview of the problem here. We focused on current trends for a reason: a digital product needs to stand out, needs something that pops right now. While blindly following trends is questionable at best, and is dull and insipid at worst, you need to keep in mind what’s out there at this very moment. The right font is at the heart of your communication. And there’s no right font for every design problem.