Selecting the right font for your digital business is crucial for memorable branding and a fluid user experience, but it can be tricky. Let me guide you in picking the typographies that will help you meet your project’s goals!
In the 18th century, Giambattista Bodoni set out to transform the alphabet into art. He took an idea very seriously: typefaces speak to us. Bodoni was the first to give fonts the importance they deserve, printing volumes where his lettering had more prominence than the content itself.
Today, no one discusses how typographies are vital in conveying your company’s brand identity or providing a great user experience. Just look at the Lancia, Armani, Zara, or the band Nirvana logos; they are Bodonian. Or how Mailchimp, Spotify, or Airbnb strategically select fonts to enhance their visual appeal.
Why typography matters for your project
As a startup founder or maker, choosing the right typeface is not just an aesthetic choice; it’s a strategic decision. Hans Eduard Meier pointed it out in his book The Development of Script and Type (1959): the ultimate purpose of a typeface is to communicate, which means - and involves - many things.
Typographies have the power to instantly connect with your users, affecting brand perception. They can convey right away if your product is serious or fun, if it’s tech-savvy and innovative, or classic and organic. But not only that. Selecting the ideal fonts directly impacts your product user experience, from performance to accessibility.
But don’t feel overwhelmed. To choose the perfect font for your digital project, just make sure you follow these three criteria: visual, technical, and legal.
1. Visual impact: align your fonts with your brand
Before selecting a typeface, you must define your project’s voice, personality, and user personas (you can use our brand personality exercise). Your font should reflect these unique attributes and resonate with your target audience.
The visual criterion comes with the mood board, after the discovery phase, as you collect visual references to select only those that better connect with your value proposition, your mission, and your ideal users— definitely, the ones that better “speak” about your product.
The psychological effects of different font types are well known. Serif fonts, like for example Times New Roman, Georgia, and Garamond, often convey tradition, formality, and reliability, while sans-serif fonts, like Arial, Helvetica, and Calibri, suggest modernity and simplicity. Script fonts, those mimiquing handwriting, are often associated with elegance, creativity, and personal expression. So, take into account the psychological effects of fonts when you choose one for your project to reinforce your message and brand values!
I remember working for UniversalDX, a startup leading early cancer detection, how they wanted to discuss illness from a technology advancements perspective rather than in a medical way. We recommended using Space Grotesk, a warm typeface with technical nuances, which was crucial in having a more optimistic narrative that would resonate better with the company’s audience.
2. Technical considerations: Ensuring functionality
Of course, fonts should be legible and functional, not just visually appealing. When selecting typography for your digital product, it’s vital to check its layout compatibility: Ensure that the selected font performs well across different devices and screen sizes and supports various functionalities. Check for features like monospacing and special characters for multilingualism, for example.
Fonts also play a key role in performance. I’ve asked my workmate Marta García, Frontend Developer at Z1, to provide her go-to list for improving performance on digital products regarding typographies:
- Number of web fonts: As few as possible, ideally no more than 2 per page, taking into account each variant you want to use (medium, semibold, condensed, etc.) Technically, each file we need to load on the web will influence performance.
- Variable fonts: If typography is essential in a design and the project is light (without many images, videos, lotties, etc.), we could allow ourselves to use more variants or even use a variable font that contains them all in a single file. This font type usually weighs much more than a normal one, so you must reflect on whether it is worth it.
- Format: Nowadays, the best and most recommended format is WOFF2, which is supported by modern browsers. It is no longer necessary to load any other format. However, we can always prepare a fallback with web-safe fonts in case the font does not load or is incompatible. They can even be adjusted to the same size with size-adjust and other @font-face descriptors, thus avoiding significant changes in the layout.
- Loading web fonts: It is recommended that we host the fonts on our website. This is best for both performance and privacy. This way, we avoid connecting to third-party platforms and, in some cases, having to manage legal issues related to their cookies.
- Font optimization: Some techniques will help us optimize how and when fonts are loaded on the web. The @font-face declaration allows us to configure them in CSS with descriptors (font-family, font-style, font-weight, etc.). This way we can load what we are interested in from this font, for example with unicode-range we can limit the characters.
- Font download: With @font-face, the download request will not be made until that variant is used in the styles. Therefore, we can prioritize the fonts we need to load first according to the order in the CSS or even place them in the HTML file instead of in the styles file, which will be loaded later. With this technique, we have both the @font-face declaration and the typographic styles of, for example, body and h1 in a <style> tag within the <head> of our page.
- Display: The font-display descriptor allows us to create strategies with different values depending on how we are interested in displaying the fonts. Swap is usually the recommended option for almost all cases. It allows the texts to be displayed with the alternative font we have for fallback while our custom font is loading. This can cause jumps in the layout, so it is better to make them similar and adjust their size.
3. Legal nuances: Understanding font licenses
If you have budget constraints, open-source fonts are a great option (like the Google ones). But if you are looking to elevate your brand and create a more outstanding look and feel, opting for premium and more sophisticated fonts might be better. In this case, you better double-check the fine print before you fall in love with any font because some are truly expensive depending on how you use them.
In this regard, you must be very aware of the legal requirements for using fonts. Licensing can vary greatly depending on whether the font is used solely for branding, landing pages, or apps. Be mindful of licensing costs, especially if your product scales, since the number of visitors determines many licenses.
So, where do I find the perfect typeface?
I like to think of searching for a typeface as a treasure hunt. Gold is only found after spending time digging and filtering! Use resources like the following to find suitable typefaces and collect them in your project’s mood board:
- MyFonts
- Typographic foundries. There are useful repositories like Type.lol and Type Foundry Directory, but some of our favorites are Fontshare, Pangram, Grilli y Arillatype Studio.
- This Webflow list
- Awwwards’ Best Free Fonts
But if you don't feel like hunting and you'd rather play it safe, these are the 6 preferred and most used fonts for apps and websites by Z1. What they have in common is that they are versatile, have broad families and technical characteristics that allow us to combine numbering and text in a way that is suitable for typical components of digital products.
- Inter: A variable font family made for computer screens with a tall x-height to improve readability.
- DM Sans: Ideated for small text sizes, this geometric sans-serif has weights from Thin to ExtraBlack and a new optical size axis.
- FK Grotesk: Suitable for both small text and large headlines alike, this typeface stands out for its versatility.
- GT America: With a wide range of weights and widths, this font provides a modern yet timeless look.
- Manrope: It supports variable font technology and includes advanced OpenType features like ligatures and stylistic alternates.
- Satoshi: Its tabular lining figures, numerators and denominators are ideal for typesetting fractions.
TL;DR? Just keep in mind:
- Great typographies are more than just aesthetics: selecting the right font is vital to creating a successful digital product; it’s about delivering a clear, engaging, and memorable experience to your users.
- Be aware of the legal requirements: open-sourced or high-priced, always double-check the fine print of typographies licenses, the prices can vary greatly depending on the use you make of it.
- Readability first: Above all, readability should be your top priority. Ensure that your chosen font is easy to read at various sizes and screen resolutions. Always prioritize readability to ensure a positive user experience.
- Don’t mix too much: Our recommendation here is to avoid using too many different typographies in a single product. It is visually inadvisable and will also result in longer loading times.
- Test font size and spacing in Figma Mirror: See how the font looks on real devices and check if it enhances the user experience by making the design more intuitive, comprehensive, and cohesive.
- Ask your frontend colleagues: They will check all the technical nuances to ensure optimal performance.
