How To Pick The Right Typeface For Your Digital Product

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">What to keep in mind when you’re choosing the right font for your digital product</p></div></div>

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Brand Personality</p></div></div>

<div class="p-lr mt-24 mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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 <a href="https://vauban.io/" class="underline">Vauban</a>, the wealth container platform (learn more about our work with Vauban in our<a href="http://behance.net/gallery/98696873/Vauban class="underline">Behance case here</a>, and our <a href="https://www.embacy.io/cases/vauban" class="underline">case story here</a>):</p></div></div>

<div class="p-lr mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">On the other hand, a lifestyle product might need something more refined, something smooth and tranquil. Like the fonts in our project for <a href="https://www.tldental.com.au/" class="underline">TL Dental</a> (and here’s <a href="https://www.behance.net/gallery/107997033/TL-Dental-Website" class="underline">the case on Behance</a>, for all the curious-minded):</p></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Reasonable Grotesks</p></div></div>

<div class="p-lr mt-24 mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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 <a href="http://revolut.com/" class="underline">Revolut</a> using Basier font for accents and <a href="http://intercom.com/" class="underline">Intercom</a> with Graphik font:</p></div></div>

<div class="p-lr mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Sophisticated Serifs</p></div></div>

<div class="p-lr mt-24 mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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 <a href="http://wearecollins.com/work/match/" class="underline">Match</a>:</p></div></div>

<div class="p-lr mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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 <a href="http://medium.com/" class="underline">Medium</a>, <a href="https://mailchimp.com/" class="underline">Mailchimp</a>, and <a href="https://whereby.com/" class="underline">Whereby</a>:</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Technical Details</p></div></div>

<div class="p-lr mt-24 mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

<div class="p-lr mb-56"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Pairing Up</p></div></div>

<div class="p-lr mt-24 mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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:</p></div></div>

<div class="mt-16 mb-80"><p class="text-gr"><a href="https://morkborg.com/" class="underline">MÖRK BORG</a> is a tabletop roleplaying game. It has stunning art direction, and the website for the game doesn’t disappoint: a lot of fonts are used, all highly contrasting with each other, yet the final result is coherent and consistent. This is amazing, and these combinations wouldn’t be suitable anywhere else</p></div>

<div class="p-lr mt-24 mb-128"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

<div class="mt-16 mb-128"><p class="text-gr">Logos for Kickstarter, Skillshare, Heartcore, and Webflow</p></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Budget Considerations</p></div></div>

<div class="p-lr mt-24 mb-80"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

<div class="p-lr"><div class="g-7-15"><div class="transp-bl"></div><p class="h2-style">Outro</p></div></div>

<div class="p-lr mt-24"><div class="g-7-15"><div class="transp-bl"></div><p class="h4-style">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.</p></div></div>

How To Pick The Right Typeface For Your Digital Product

You might also like