Design, UI, UX, Insights, Inspiration

20 Best Figma Fonts for Modern UI Design

Google Fonts Combinations and Custom Fonts for your Next Figma Project

  • By Sandra Boicheva
  • April 26th, 2023

If you’re looking for the best Figma fonts to sparkle your next UI/UX design in 2023, you’ve come to the right place.

One of the most important tasks for UI/UX designers is selecting the right font as it affects not only the macro visual style of your design but also has a direct impact on the user experience. Here’s why:

  • The right font makes engagement simple with higher readability and legibility.
  • Good fonts improve UI because they affect how your apps feel.
  • A good personality provides a good first impression, and fonts have personalities.

With this in mind, we made a list of the best Figma fonts and font combinations you can use in 2023 and beyond. Without further ado, let us get started.

Title: Article Overview

 

What are the Best Figma Fonts for Modern UI Design?

It can be difficult to choose the ideal UI font for your website or app. On the one hand, you want user interface fonts that are memorable and consistent with your brand. On the other hand, you also want a typeface that is readable, effective, and mobile-friendly to perform the best across all platforms and screen sizes.

The good news is, we’re going to look through the best Figma fonts to bet on for your designs. All fonts in the selection are readable, efficient, and mobile-friendly. And the best part, most of them are free to use.

Starting with open-source fonts, you don’t need a huge font collection with hundreds of high-end typefaces to make ground-breaking designs. So here is our selection of the top Figma fonts for a modern UI design.

 

Montagu Slab

Florian Karsten created the slab-serif display typeface known as Montagu Slab. The typeface is a changeable font with a weight and optical size axis that is inspired by classic styles from the 19th century.

The optical size axis, which regulates x-height, spacing, contrast, and aperture, offers a variety of options for longer text to a tight and high contrast display variant with noticeable upturned tails.

 

Ubuntu Pairings

Ubuntu is a sans-serif humanist typeface built on OpenType. It was created and first made available in Ubuntu 10.10 as the operating system’s default font. The typeface’s spacing and kerning were optimized for body copy sizes in order to ensure readability on desktop and mobile screens.

The Ubuntu font family combines perfectly with Lora, Kreon, Rokkit, Cabin, Source Sans Pro, and Prompt.

 

Monospace Pairings

If you want to create a more vintage feel, monospace fonts are simply fantastic. They are suitable for game design, portfolio design, and landing pages. Here we have an excellent resource with a variety of pairing possibilities that you can modify and tailor. You can also get a precise preview of how certain combinations will look.

 

Montserrat

  • Font: Montserrat
  • Type: Sans-serif
  • Library: Google Fonts

The Sans-serif typeface Montserrat Font is regarded as another attractive and worthwhile Sans-serif family. It excels in a variety of settings, including body text, headings, and logos. Montserrat is a well-liked option for many design projects thanks to its simple, geometric shape and high legibility. It supports a broad variety of languages and its adaptability is increased by the variety of weights it offers, from thin to black.

 

Playfair Display

Playfair Display is an open-source Transitional serif typeface with high-contrast strokes that position it more in the Modern category. Inspired by 18th-century typefaces such as Baskerville, Playfair Display is a great font for titles and headings, However, the delicate, high-contrast strokes might make it difficult to read long passages of body material, especially when used at smaller sizes.

 

PT Serif

  • Font:   PT Sans
  • Type: Serif
  • Library: Google Fonts

PT SerifTM is the second pan-Cyrillic font family created for the “Public Types of the Russian Federation”. It’s a transitional serif typeface with humanistic terminals. Its metrics, proportions, weights, and design are all in harmony and it is intended to be used with PT Sans. The font includes standard Western, Central European, and Cyrillic code pages which makes it a special tool for modern digital design.

 

Roboto

Roboto is a humanist sans-serif typeface that is clean and extremely legible from a distance or in small letter sizes. It’s quite easy to read at a quick glance which makes it perfect for huge blocks of small text.

 

Now, let’s spice things up with the best custom Figma fonts you can try out in 2023.

Great Sailor

  • Font: Great Sailor
  • Type:  Serif Display Font
  • Store: Creative Market

Great Sailor Display is a simple slab Victorian serif font. It has a combination of upright, straightforward letters that makes a powerful impression. It pays homage to the exquisite typographic design of the 19th century and is inspired by the type of fonts used frequently on cigar box labels during that time.

 

Magnify

  • Font:  Magnify
  • Type:  Sans-serif
  • Store: Envato Elements

Magnify offers family packages and 16 different styles. It is straightforward, tidy, and modern. The uppercase letters O, G, C, and Q, as well as the lowercase letters O, A, C, and E, sport a slightly oval shape. Magnify comes in 8 weights, ranging from Matching Oblique to Bold.

 

Avalon Sans Serif

  • Font:   Avalon
  • Type:  Sans-serif
  • Store: Creative Market

Avalon is a versatile typeface created to complement your digital projects with a classy, distinctive, and friendly appearance.

 

Lion and Hare

  • Font: Lion & Hare
  • Type:  Sans-serif Condensed
  • Store: Creative Market

The ultra-compressed, towering Lion & Hare font family exudes power and might. In order to give the font a more consistent geometric appearance, the characters keep their edges reasonably square. The font family has 6 styles and supports 27 different languages. Ideal for website headers, magazine layouts, logos, branding, and more.

 

Ramexon Experimental Display

  • Font: Ramexon
  • Type:  Sans-serif Display
  • Store: Creative Market

Ramexon was founded as a result of modern experimental typography and anti-design. It aims to help designers produce something more original, vibrant, and loud that enhances the visual presence in this crowded space. Each character has a bold, boxy, powerful, and quite distinctive design.

 

Luciano

  • Font: Luciano
  • Type:  Sans-serif Display
  • Store: Creative Market

Here’s a unique Modern grateful font with an incredibly adaptable nature. It looks fantastic in both large and small sizes thanks to the use of strong capital letters and fluid, open lower cases. The font is clear, minimalist, warm, and simple to read.

 

Mellifluous Slab Serif

  • Font:  Mellifluous
  • Type:  Slab serif
  • Store: Master Bundles

Slab Serif Mellifluous is great for captions, headlines, and pretty much everything else.

 

Heralite Floral Display

Heralite Monogram is a beautiful font with decorative flowers, ideal for wedding invitations, stunning stationery art, captivating social media posts, mugs, printed products, posters, branding, and logos.

 

Lunatoire Modern Serif

  • Font: Lunatoire
  • Type:  Serif
  • Store: Creative Market

Lunatoire (the story of the moon) is a variation of the traditional serif typeface, made for editorial projects and brand design.  The pack features uppercase and lowercase; numerals and punctuation; accented characters; and multilingual support for versatile use.

 

Woodman Slab Serif

  • Font:  Woodman
  • Type:  Serif
  • Store: Creative Market

Woodman is super versatile and includes 3 weights, standard, thin, and heavy. There are four different styles for each weight: standard, rounded, press, and grunge. The heavy version also has a 5th style with a grunge outline.

 

Proxima Nova

Proxima Sans is a redesign of the Proxima Nova family. There are now 48 fully-featured OpenType fonts that have been added to the original six fonts. Proxima Nova, Proxima Nova Condensed, and Proxima Nova Extremely Condensed are the three available widths. Each width consists of 16 fonts.

 

Petrichor Monospaced Sans Serif

Petrichor Monospaced Sans Serif Font is a flexible font, ideal for headings and titles. Its professional look will complement any business and corporate design.

 

Resist Sams

  • Font: Resist Sans
  • Type:  Type Department
  • Store: Master Bundles

A free-spirited Resist Sans balances the minimalistic qualities of neo-grotesques with an intriguing flair of resistance with its deep ink traps.

 

How to Choose the Best Figma Fonts for UI/UX?

Now let’s learn the basics of how to select the right font for your project. There are a few important factors to take into account:

The goal of your design. Choose how you want your audience to respond to your fonts as your first step. How would you like your fonts to personalize your brand?

The mood of your overall design: Your fonts will inevitably affect the overall design, so Make sure your fonts match the visual style of your design since they will inevitably affect it.

Comfortable to read. Your font’s primary purpose is to make the text legible in all sizes. This means your users should also feel comfortable reading as if the copy reads itself.

Size is really important. Selecting the ideal font size is another aspect that greatly enhances your design and aids text readability. Although there isn’t a set standard for mobile web typography, you can always refer to the following rules:

The standards of the main design systems can always be used as a guide. For instance, Material Design makes use of the Roboto 14px and 16px fonts, respectively. iOS, on the other hand, makes use of SF Pro 15 px for secondary and 17 px for primary.

Use a font at least two sizes smaller for secondary text, or, as the term implies, for the text that is of less importance, to establish a visual hierarchy.

Font scaling. Choose a mobile typeface that can be scaled across various devices. This will assure the adaptability of your design.

Use one or two fonts at a time. Your users can get distracted by too many fonts, which will compromise their user experience. Use no more than one or two fonts at once to avoid this. Working with just one font family is the safest option.

Now here’s how to find them:

Study other designers’ work: If there’s a UI/UX designer whose work you like, just go ahead and ask them what font they used for their amazing design. Many people would be flattered and would love to respond.

Keep track of what big companies are doing: Take note of what fonts big tech companies are using for their logos, apps, and websites, and look for patterns and trends.

Analyze the competition: Many industries have different standards and follow different design trends. This is why, analyze only your biggest competitors in the particular industry you design for. From here on, the Inspection tool on your browser is your most loyal partner in crime.

Look for inspiration: When you design something specific (for example, a food app), go to design platforms such as Behance, Dribbble, or Awwwards to see the most popular and highest-rated designs. Find the ones that most reflect the vibe you wish your project to achieve and try to replicate the fonts or find even better ones.

See the top-trending and most popular fonts on Google Web Fonts. They are popular for a reason.

You can also learn how to choose the right UI fonts for your apps, what to look out for and what are your safest choices for fonts.

 

How to Add Fonts to Figma?

The Google Fonts Collection is readily available right out of the box with Figma. The font selection will display all of your local fonts if you are using Figma Desktop. Installing Figma Font Service will allow you to view your local fonts on the browser version as well.

Adding Google Fonts

There is no need to install any Google Fonts because all of them are already accessible on both Figma Desktop and Figma on your browser. If you use Figma Desktop, you can also automatically access all your local fonts. To add any font to Figma, simply install it and restart the tool.

However, if you’re using the Figma Browser, you will need the Figma Font Installer for your system fonts. Once that’s up and running, simply restart your browser tab, and your system fonts will display in the font picker.

Adding Custom Fonts

Using custom fonts is inevitable in Figma when you want to give your designs a more professional look and feel.

Fortunately, adding custom fonts in Figma is quite easy. Figma can access the fonts library on your computer, meaning that when you install fonts on your computer, you can automatically access them in Figma as well.

Take these steps to install custom fonts on your computer:

  • Step 1. Go to any website/online store where you can download/buy a font and find the font you need.

  • Step 2. The easiest way to get your font is if you’re using the desktop app. Simply download the font and install it on your computer. If the fonts come in a ZIP file, extract it to find the .ttf or .otf font files

  • Step 3. Go to Figma and choose Fonts. You can now access your new font from the drop-down menu.

 

If you’re using Figma in your browser, however, you’ll need to use their font installer. Once installed, it will give you instant access to all the fonts already installed on your computer while using the browser version of Figma.

Please note that local fonts aren’t currently supported on Linux or Chrome OS, so you’ll be limited to Google fonts only.

 

Feeling motivated and inspired to roll up your sleeves? Awesome. In case you need a web development partner for your current and future projects, here at htmlBurger, we are more than glad to discuss your needs. Wanna talk?

Advertisement

To sum up

When it comes to modern tools for UI design, Figma is unquestionably one of the best. Its integration with Google Fonts makes it easy to find the perfect font for your project, however, understanding the golden rules of typography and constantly getting inspiration from leaders in the industry comes a long way.

We hope you found the perfect fonts for your next Figma project. In the meantime, check some of the related articles:

Subscribe for our newsletter

We hate boring. Our newsletters are relevant and on point. Excited? Let’s do this!