Typography in Digital Design

Choosing Fonts for Web and Mobile Applications

Typefaces are the essence of every digital interface. From web pages to social media, it is an important aspect that drives user engagement. Even the fonts in this article and the website were chosen to shape readability and reflect the organization’s brand identity. Typography itself is a vital part of visual design and it’s not just about visibility but also usability. In this blog, I’ll be discussing different font types, a bit about text readability and accessibility, and other concepts like font licensing and trends. Let’s go ahead and start with the basics.

Understanding the Basics of Typography

I can’t recall how many times I’ve had to go over font families and styles to decide on a font for a new design project. After countless scrolling through font resources, I ultimately land on the default fonts like Inter, Roboto, Poppins, and not to mention Montserrat. The struggle aside, it’s important to know the type of font you’re about to use. Let’s talk about some major ones:

1. Serif

Serif fonts were generally derived from greek writings and were made a prominent part of printing in the 18th century. With its prominent flicks at the end of each stroke in letters, the Serif font displays a sense of refinement. For example, if you look at Vogue’s logo you’ll see that it shows class and elegance. Serif is widely used in the fashion industry to showcase a confident branding style.

Some widely used Serif fonts include: DM Serif Display, Georgia, GT Alpina, and Playfair Display.
 

2. Sans Serif

The French word Sans means ‘without’, depicting the lack of strokes that make a Serif font. Thus, Sans Serif. This type of font tends to modernize your designs. With a bold, clean layout, Sans Serif is most used for casual brandings in tech companies and is widely visible in today’s SaaS websites. You would think, why not use a classy Serif font for our websites? Well, the king of sans-serif fonts, Comic Sans, might disagree.

Some widely used Sans Serif fonts include: Montserrat, Figtree, Manrope, and Source Sans.

3. Script

Script fonts take you back to the 17th century, making you feel like an English person writing a poem on a piece of paper with a quill with Bach playing in the background. This type of font gives your text and brand an authentic human touch as if it were handwritten. An example of this is Coca-Cola which delivered a timeless logo with its use of a Script font.

Some widely used Script fonts include: Caveat, Monarda, Tahu, and Righten.

An exercise for you: Identify which of Arbisoft’s products/teams use a casual Sans Serif font, an elegant Serif font, or a handwritten Script font.

Now each font type itself could have different font weights and styles. These weights define if a font is readable or not in a certain format or platform and usually range from thin to regular to bold. A general practice of mine, when starting on a new project, is to define all of these text styles on Figma as part of the design system, if that’s a requirement. This helps me quickly access and modify these styles all over the application.

Another perfect example of font-weight is this article itself, with the headings having a semibold weight and the body text having a regular weight.

Enhancing Readability and Making Typography Accessible

An important step while choosing fonts is to make sure that they are accessible to all. And for that, it’s important to include fonts that are readable and legible. Readability is a simple term but holds a great power when it comes to typography. While legibility means how easy it is for viewers to differentiate between individual letters, readability is defined as how easy or quickly a passage of text can be read. In web and mobile designs, it’s a good thing for the users to easily process the information they’re reading and certain factors go into play to ensure that.

1. Hierarchy

Text hierarchy is an essential part of structuring the layout so that the user knows how to read through it. You need to correctly define headings, subheadings, and body texts from each other in order to create a visual hierarchy. For better readability, you can also combine text with white spaces and images to create some sort of flow. You can play around with font weights here as well. 

2. Alignment

Alignment of text depends on the type of content you’re working on. There are centered, left-aligned, right-aligned, and justified texts and while each works in its own way, left-aligned is generally better for long text blocks as it is much easier for a human eye to track back to the start of a line when it’s starting from the same margin.

3. Contrast

Contrast might be the most vital part of text readability when it comes to eye strains. You need to make sure your text and background complement each other. Black text on a white background works the best. The image below makes it difficult to read the blue-colored text on a similar-colored background. If your eyes are hurting, don’t worry. That just means the contrast is bad. If not, well then you might have supervision.

Side note: In printing, the colors are shifted from RGB to CMYK, so you need to be aware of the text colors in your digital designs so that it doesn’t become a contrast issue when printed.

There are more factors that help with text readability, but more of that later. Now let’s move on to some practical things to take care of when choosing typography.

Navigating Font Licensing in Digital Design

Now that we’ve gone over multiple typography concepts and understood what it takes to choose the right typeface, let’s discuss a general dilemma. Should you buy expensive fonts or use free-to-use system fonts? Although there might be many factors for this, it all comes down to what you are trying to convey and achieve through your web or mobile application using that font.

If you’re trying to build your brand, you might be better off buying a font as it would make your brand unique and exclusive as many people tend to overuse the general free fonts for their designs. Paid fonts are mostly variable meaning you could easily play with their weight and kernings (spacing between each letter). That doesn’t mean that you shouldn’t use free fonts. Google Fonts also provides you with a wide library of variable fonts that you could use to design your applications. Whenever I’ve had to create quick designs for applications, it has always been easier to just pick a Google font and use that.

Moreover, it’s easier for the developers to define the font family in their style files and they also don’t have to worry about paid licenses. And while we’re on the development subject, it’s also important to be vary of font file formats as the correct format could help load your web or mobile application faster. But let’s leave that discussion for some other day.

Ultimately, you need to decide the trade-off between investment and the quality/uniqueness of a font. Once you’ve decided that, it’ll be easier for you to pick a font for your application.

Typography Trends in Digital Design

Ok, so you’ve also decided if you want to buy a font or not. Now, you need to be aware of the ever-evolving typography trends. By keeping up with trends, you’ll be able to stay relevant with your designs, especially if you’re a social media manager. That doesn’t mean rebranding your product every time the typography trend changes. 

New trends help you modernize your designs and reach a wider audience. If we do a recap of 2024, bold, variable, and retro fonts have been the talk of the town. Each one of these trends has helped designers move away from generic designs and create something that’s fresh. We’ve seen multiple companies rebrand their products. Wise completely revamped their brand and changed their logo using a bold slanted typeface. We saw Bolt do the same with their Sans Serif font. 

Even Webflow didn’t stay behind and revamped their brand to stay visually consistent with the typography trends.

It all depends on your brand and the type of application you’re designing. If remaining unchanged keeps you recognizable and reliable then that’s what you should go for.

Wrapping Up

While most of typography is objective, like ensuring readability and usability, it can also be considered as subjective, reflecting your personal preference. It all depends on your product’s brand and your own style and your emotion when you look at that brand. In the end, choosing a font for your designs requires focus. It’s about finding that sweet spot between accessibility and aesthetics. Here’s a fun wordplay for you:

I hope that this article helps you understand what type of font you’re looking for.