28 Best Free Fonts for Modern UI Design in 2024 (+ Typography Best Practices) | Untitled UI (2024)

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 or the best free 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 the perfect 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 and UI 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 creative projects. 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, 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. Each typeface listed in this post is free to use for both personal projects and commercial use.

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 or display typeface is intended for use at large sizes for headings, rather than for extended passages of body text. Website headers are a great example of where a display typeface should be used.

As a general rule, “text” styles should be used for the majority of informational copy and body copy (paragraph text, 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 size 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).

Line height

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 UI’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 to be a display typeface (for larger headings), or body 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 an excellent choice — 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. It's also a great idea to check that the typeface includes all the special characters you'll need (such as punctuation marks), and multilingual support (different languages) if you need them!

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 fonts for every project. Perhaps you've seen web designers revive vintage fonts or 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, you can inspect Stripe and discover they’re using Söhne, a high-quality sans-serif typeface from Klim Type Foundry.

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 free version or a “test” font to experiment before purchasing. If you're considering investing in a premium typeface, we recommend you try out both the free version as well as some similar 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.