The typography system is one of the most foundational parts of user interface design. Choosing the right fonts for your designs is not about just choosing web safe fonts. If your users are unable to read your websites due to bad typography or small sizes, you can say goodbye to them immediately. That’s why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design and for different design projects.
Text is never just text. It often goes unnoticed in good design, but good type design and a great font can elicit emotion, guide attention and even create a typographical identity. I've always felt that good typography is the most undervalued and underappreciated elements in modern product design.
Bad typography, by contrast, sticks out. Even to non-design-oriented folks, bad typography is easy to spot. It reflects badly on the brand and leads to a poor user experience, even if users can’t pinpoint why...
Often, designers fall back on trends rather than carefully considering the best fonts for a design. Partly, because good typography skills are difficult to master. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out, choose the perfect font for each project, and improve user experiences.
Font choices can be hard and it's easy to fall back on "safe fonts" like Roboto, Source Sans Pro, Times New Roman, or Lato. These are web safe fonts that are tried and true, but they can make your UI design look dated. We've written this post to help you choose the absolute best free fonts for modern web design.
But first, let's spend a bit of time on typography basics to help you make the most of modern fonts.
What does “Display” mean?
A display text style is intended for use at large sizes for headings, rather than for extended passages of body text.
As a general rule, “text” styles should be used for the majority of informational copy (body, labels, UI elements) and small sizes in user interfaces, while larger “display” styles should be reserved for headings (H1-H6).
Base font size
Defining your base font size is an important step for responsive design. The base font size refers to the “default” or “primary” font size used in a website or app. The base font usually applies to most paragraphs, labels, menus, and lists.
Most modern UI and web utilizes a base font size of 16px. This is always a good default to start from as it is legible for users to read text on screen.
Ultimately, you want the body text on your phone (when held at a natural distance) to be as readable as the text in a well-printed book (when held at a natural – usually slightly farther – distance).
Determining the correct line height for a text styles is important to ensure legibility. Determining the correct line height can differ between different typefaces and sizes, so it’s important to adjust and experiment until it looks and “feels” right — it’s not an exact science.
As a general rule (and a good starting point), body text should be between 1.5 to 2x the text size, depending on the width and length of the content. For example, if your body text is 16px, set the line height to 1.5 or 24px.
To complicate things further, there is an inverse relationship between font size and appropriate line height — the larger the text, the smaller the line height should be. As a general rule for display text (headings etc.), aiming for 1 to 1.25x is usually a safe bet. For example, if your display text is 60px, set the line height to ~1.2 or 72px and see how that looks.
We’ve stress-tested Untitled’s typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any project.
Optimizing letter spacing for display text
Often, typefaces are designed with an intended usage in mind — they're optimized for display usage (larger headings), or text (smaller body copy etc.) In general, text type is designed to be legible and readable at small sizes.
Don't worry, you don't necessarily need to choose a separate typeface for display and text. Many typefaces can be used for both. Inter is a great example — it's clean, consistent, and uncomplicated design features make it suitable for use at all sizes.
However, if you're using the same typeface for both body text and display test, it is often a good idea to tweak letter spacing to the display text style to make it more legible in larger sizing. Don't go overboard though, a little goes a long way and helps display text look and feel tighter.
Unfortunately, Figma only allows you to define a % value for letter spacing in text styles, which doesn't mirror CSS. If you're handing designs to a developer or building a design yourself, you'll need to define either a hard-pixel value or a rem/em value (e.g. -0.1em).
Choosing the right fonts for your project
In order to implement a good typography system, the first thing is to choose an appropriate font family. Every year, thousands of new typefaces are released, and it can be hard to choose the right one for your project.
Here's the thing: you should ignore 99% of these new fonts. This might sound hyperbolic, but 99% of modern fonts are low-quality and are usually just tweaked versions of popular font families in an effort to make a bit of money.
Here are a few tricks you can use to start picking out high-quality typefaces right away.
Look for fonts with at least five weights
When choosing a modern font for web design, a great indicator of quality is the number of font weights the typeface comes in. A good font will come with at least four — usually light, regular, medium, semibold, and bold (with italic versions of each) — and indicates it's been crafted with a little more care and attention to detail.
This isn’t always true, but as a general rule, typefaces that come in a lot of different weights tend to be crafted with more care and attention to detail than typefaces with fewer weights.
Keep it simple
If you’re just starting out, a safe bet is to stick with tried and true typefaces that have stood the test of time. A neutral sans-serif typeface will never let you down. This is a good way to pick the right fonts until you get more experienced with picking the right font for each design project.
It can be tempting to seek out different fonts, script fonts, or other unique font for every project. Perhaps you've seen web designers use a combination of serif and sans-serif fonts. If you're comfortable tackling this — great! Keep in mind that this can be incredibly hard to get right. If you're just starting out, keep it simple and stick with using the font choices recommended in this post.
If the font you're considering is popular and already used by great designers or companies who value good UI design, it's likely a good font.
While it might not be the most ambitious choice, you can always swap things out later once you've laid the foundations and are more comfortable!
Learn from the best
Another good approach to choosing good fonts for web design is to pick a typeface that a large design-focused company is already using — you can bet that they’ve done the research and chosen a high-quality typeface.
In this example, Söhne is a paid font, which means you’ll need to purchase a license to use it in a project. Not every project needs a super premium font! Many type foundries will permit you to download a “test” font to experiment before purchasing. We recommend you try out some free modern fonts in your designs first before making a decision — often, they're so similar it's not worth the investment.
Fewer fonts are best
When looking for the best fonts for your UI design, it can be tempting to pair fonts. Perhaps you can't decide between a few great fonts or you're considering a serif and sans-serif combination?
Whatever you decide, it's a good idea to limit your designs to using just one typeface. Multiple different fonts in a design can quickly look messy and cluttered unnecessarily.
If you absolutely need to, use a maximum of two. Often, you'll find that modern fonts come with enough variable weights to effectively act as several fonts at once.
Whichever fonts you do decide on, limit yourself to using just one or two at a time. Sometimes just using one font at various weights can be just as effective as using multiple fonts.
The only free fonts you need for modern UI design
Most lists go a little overboard with recommendations. As we've covered, you probably don't need a library of hundreds of fonts — here are our picks for the best high-quality (and free) typefaces that are great for almost any UI design project:
1. Inter (free)
Inter is a free, open-source sans-serif typeface designed by Swedish designer/programmer Rasmus Andersson. It was designed to work well on screens as a UI font and features a large x-height. The family is available in nine weights with matching italics, as well as a variable font version.
2. DM Sans (free)
DM Sans supports a Latin Extended glyph set, enabling typesetting for English and other Western European languages. It was designed by Colophon Foundry, that started from the Latin portion of ITF Poppins, by Jonny Pinhorn.
3. Work Sans (free)
4. Poppins (free)
Poppins is a geometric sans-serif typeface published by Indian Type Foundry in 2014. It was released as open-source and is available for free on Google Fonts. Indian Type Foundry describes Popins as “an internationalist take on the geometric sans genre.” It supports both Latin and Devanagari languages and is available in nine weights with matching italics.
5. Open Sans (free)
Open Sans is an open-source, humanist sans-serif typeface designed by Steve Matteson and released in 2011. The five weights with matching italics make Open Sans extremely versatile and useful for a wide range of applications. It is a ubiquitous font on the web, used by everyone from Google to WordPress. I’ve even heard it referred to as the “flat design” font. I like to think of Open Sans as the new Arial.
6. Space Grotesk (free)
Space Grotesk is a proportional sans-serif typeface variant based on Colophon Foundry's fixed-width Space Mono family (2016). Originally designed by Florian Karsten in 2018, Space Grotesk retains the monospace's idiosyncratic details while optimizing for improved readability at non-display sizes.
Discovering new typefaces
Choosing the right typeface for a project can be tricky, even if you're a seasoned web designer. However, don’t fall into the trap of thinking every project needs an ultra-premium paid typeface (which sometimes cost thousands of dollars). Start by getting comfortable with free typefaces in the project first before deciding whether or not you need to invest in a paid typeface.
Here are some other great resources to discover and find the right typeface:
Typewolf is an awesome (and independent) typography resource created by Jeremiah Shoaf. It's our favorite resources for discovering great and underutilized typefaces and web fonts, both free and paid. It's also a fantastic place to discover web designers and great web design from all corners of the internet.
Fonts In Use is another independent searchable archive of typographic design, indexed by typeface, format, and topic. It’s a great resource of real-life examples of typefaces in the wild and a real time-sink if you’re looking for something new.
Google Fonts (free)
Google is “Making the web more beautiful, fast, and open through great typography.” Google Fonts is the most popular source for free typefaces. There are some really great open-source fonts and web safe fonts here for pretty much any project you have, as well as some interesting unique fonts and a huge collection of serif fonts and script fonts.
Adobe Fonts (kind of free)
Adobe Fonts (formerly known as Typekit) is a great resource for finding and discovering free fonts. They’re not entirely free though — you’ll need an Adobe CC subscription to use these typefaces.
MyFonts is the largest collection of fonts on the web, with over 130,000. There’s some great finds in here, but it can be a bit of a chore to wade through the not-so-premium typefaces.
More best practice guides
This post is an exert from Untitled UI, the largest Figma UI kit and design system in the world. Untitled UI includes tips and best practices right in the Figma file to help you level up as a designer.
Untitled UI is the largest Figma UI kit and design system in the world. It was designed to be the "ultimate" UI kit and the perfect starting point for any kind of project — from beautiful marketing landing pages, all the way to complex dashboards and web apps — Untitled UI has thought of absolutely everything so you don't have to. It's meticulously crafted with 100% Auto Layout 3.0, super-smart variants, and with accessibility in mind.
You can check out a full preview of the design kit, or check out the 100% free version on Figma Community (which is more advanced than most UI kits in its own right!). If you're short on time, here's a 60-second overview: