30+ Best Figma Fonts in 2022 for Modern UI Design Example.

30+ Best Figma Fonts in 2022 for Modern UI Design

18,723 2
January 24, 2022 April 29, 2022 5 min
Liza Koenhoven photoAuthor by:Liza Koenhoven
vodiashinaArticle reviewed by:
review image
Article is reviewed by Valeria Vodiashina, freelance graphic designer and photographer
on April 29, 2022

Valeria is a cheerful girl madly in love with graphic design. She also writes about design for MasterBundles.

Learn about comment

Best Figma Fonts. Ready to delve into the collection of Figma Fonts for any purposes? MasterBundles has already prepared one!

Remember that the main purpose of text is to convey information. It should not only be an element of decoration. The faster and easier a person reads, the more information it is possible to pass along.

Every designer faces the following dilemma every so often: What font should I use?

All you need to create the best design is to use simple fonts that are easy and quick to read. Here’s a collection of some great examples of the best Figma fonts we have found for you on the web.

Figma fonts.

MasterBundles has hundreds of amazing looking fonts to choose from. Just browse our online catalog. Below, we put together a little collection for you of fonts that we think would look great in your next Figma project.

What fonts are available in Figma?

Figma comes with the Google Fonts Library available right out of the gate. In addition, if you use Figma Desktop the font picker will show you all of your local fonts. You can also see your local fonts on the browser version; just install Figma Font Service.

How to install fonts into Figma

All Google Fonts are available without any need to install. If you use Figma Desktop, all of your local fonts will also be picked up by Figma. Simply install a font like you normally would and then reboot Figma.

How to install fonts into figma.

If you are using Figma Browser, all Google Fonts are available as well. If you want to use your system fonts, then you need to install Figma Font Service on your system. Once that’s up and running, simply reload your browser tab and your system fonts should appear in the font picker.

This is a stylish font It has both modern and retro look.

The best Figma fonts: Free and Premium

The best free Figma fonts for UI designs are hands-down Google Fonts. Knowing how to navigate Google Fonts is great knowledge to have as a designer. To start diving into the world of Google Fonts you can read this article for a selection of the best ones.

Best sans-serif fonts in Figma

If you don’t know where to get started, Rasmus has a great collection of sans-serif fonts for Figma here. They are easy to read and great for headers.

Below is a list of the best sans-serif fonts out there for a clean, modern UI.

Petrichor


Petrichor monospaced sans serif font.

button for more details.

This font is also part of the Ultimate Font Bundle. This sans-serif font is great for headers and titles. It is very readable and modern-looking, but has a few quirks that make it interesting to the eye (for example, the straight leg on the Q).

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Petrichor Sans Serif Outline Font

Plethora


Plethora monospaced sans serif font.

button for more details.

Another sans-serif font for headers and titles. If you need the main sections of your UI to pop out, look no further.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Plethora Monospace Sans-Serif Font

Minimaly


Stylish font in minimalistic style.

button for more details.

This typeset works great for short blocks of text. It is incredibly easy to read, yet fun to the eye. Paired with something like Petrichor for a header, it can really pack a punch.

Nunito Sans


This is a stylish font It has both modern and retro look.

button for more details.

Nunito Sans is an all-time favorite, as it bonds well with most serif fonts out there. See a few examples here.

Best serif fonts in Figma

Acquire


This is a stylish font It has both modern and retro look.

button for more details.

Looking for a modern and versatile font for your web UI? Acquire will make for impactful headers (when used in all caps), but will also look great in short descriptions, subheaders, and taglines when using small caps.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Acquire Slab Sans Serif Font

Aurora


Creative and contemporary font for your brand.

button for more details.

Fonts can’t be all about headers and descriptions. Aurora is a solid choice when you need a serif font for longer text. We wouldn’t recommend it for blog posts, but it will look great on landing pages.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Merriweather


Stylish font for different purposes.

button for more details.

We think Merriweather is a great Google serif font for sleek UI design. It’s elegant and yet readable. Your readers’ eyes won’t get tired and they will easily absorb all your content.

Allenoire Modern Bold Serif Font


Modern font style for you.

button for more details.

When it’s time to get creative, this font does the trick. Complement it with a washed-out, vintage-looking color palette to make the best of this incredible font.

Chicago Maker


Vintage font style.

button for more details.

This font is a slick, impactful font for titles (works particularly well on blogs with light-colored backgrounds). Our advice is to not use it for text longer than 8 words, as it might become tiresome to the eye.

Best monospace fonts in Figma

Good monospace fonts are hard to come by. In fact, they are even harder to design. As always, at MasterBundles we’ve got your back. Here you can find Figma boards for three incredible monospace fonts to use in your UI projects.

Our personal favorites

When it comes to anything design-related, you can trust MasterBundles. We picked a couple of our favorite fonts for you to enjoy in your next Figma project.

Avenue


Street style font.

button for more details.

Avenue is a sleek, elegant, and we dare say sexy font. This greatly designed typeface should not be abused but can add a touch of luxury to any modern UI design.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
AvenueRegular.woff

Ingenue


Elegant font for interesting project.

button for more details.

Some designs require a “round” feeling. Ingenue is a great option for this. We can easily see blog titles and paragraph headers in this font.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Ingenue Monospace Sans-Serif Font

Article is reviewed by

Valeria Vodiashina, freelance graphic designer and photographer photo
—Valeria Vodiashina, freelance graphic designer and photographer

What perks does Figma have over other design tools and what jam do you particularly like?

Figma's main advantage for me is the simplicity of this program. It's a handy tool that can be quickly learned. Figma is very thoughtful and understandable, unlike Illustrator, for example.

Another advantage is the existence of Figma Community. There you can find stickers, icons, shadows, various 3D elements, prototypes, templates, plugins for work.

Its free version is suitable for a large number of designers. Therefore, you don't need to use a pirated version if you don't have money for a paid one.This is great!

Most often in projects I use minimalist grotesques. For example, Circe, Mont, Montserrat, Intro, Open Sans. They are easy to read and understand by the reader.

But if you need accent fonts, then I would draw your attention to such fonts as Yeseva One, Misto, Mak, Madelyn, Mateur.

Jittery


Use this font for your brand.

button for more details.

Jittery is another all-rounder. It’s highly readable, which makes it a potential go-to font for longer text on landing pages and even product UIs.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Jittery Slab Serif Font

Mellifluous


Multipurpose font for business.

button for more details.

This is yet another Swiss Army knife of fonts (Man! Are we on fire here at MasterBundles). Mellifluous will make for great-looking short descriptions in your UI designs. Use it in all caps for impactful headers.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Mellifluous

Moon Line


Romantic font for a special event.

button for more details.

Sometimes you just need to go wild and use a nice handwriting font. Moon Line fits the bill: it’s creative and punchy for logos, but it stays readable.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Moon Line.ttf

Doodly Handwritten


So colorful and stylish font.

button for more details.

Playful doesn’t have to mean not modern or not suitable for UI design. Many brands are going for the cartoonish look (just look at Deliveroo or Excalidraw). Doodly is a great option to appeal to one’s inner child, just make sure you don’t abuse it.

For Paragraphs

Procreate


Nice font for you.

button for more details.

If you want to go sans-serif on your blog or brochure, Procreate Sans Serif Typekit is the perfect font for your paragraph. Smooth looking and easy to read, you can’t ask for better.

Creolia


This is an amazing font.

button for more details.

When you need a great serif font for a punchy, short paragraph or a block quote, Creolia will hit the spot just about every time.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Roboto


Strong and stylish font.

button for more details.

This free Google Font is arguably one of the best ever designed. It has a proven track record and countless applications currently use it in their UI. It is a safe bet for any application, but it’s so widespread that you might run the risk of not standing out.

Oswald


Good font for book.

button for more details.

Any book lover should keep this font in their arsenal. Oswald was developed as the digital evolution of classic typefaces. Let’s just say that you can’t go wrong with paragraphs styled with this font.

Proxima Nova


Premium font for special targets.

button for more details.

This is a premium font, but trust us, it’s worth every penny. Possibly one of the most versatile sans-serif fonts out there, it can be used in long or short text, as well as in logos.

For Headings

Judicious


Perfect font for creating something beautiful.

button for more details.

Judicious is a sans-serif font that is perfect for creating modern headings that blend well in both light and dark UI designs.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Judicious Slab Sans Serif Font

Dulcet


Retro vibe font.

button for more details.

Feeling fancy? Try Dulcet to give your UI an unexpected retro vibe. This font is amazing, but don’t overdo it, as very long headlines might become difficult to read.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Bebas Neue


Cool font for different projects.

button for more details.

A font so popular that it was dubbed “the Helvetica of free fonts” and for good reason. This font is perfectly designed and fits the look and feel of almost any UI. A word of caution, like for Roboto, you might run the risk of looking repetitive, as it’s a very popular font.

Aileron


Aileron is available in 10 different styles.

button for more details.

Another great free option for your sans-serif headings. Aileron is available in 10 different styles, so whether you like thick or thin headers you are covered.

Coldby


This font is both elegant and modern.

button for more details.

This font is both elegant and modern. Although it was meant for print, we think that it’s great to give your UI designs that paper magazine feel that adds a touch of style.

For Logos

Pugilist


Pugilist is one of the few pixelated fonts.

button for more details.

Who doesn’t like a GameBoy retro vibe? Pugilist is one of the few pixelated fonts that doesn’t impair readability. A great font for tech logos.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Pugilist Pixel Font

Bloom


Bloom is a great option for creating impactful logos.

button for more details.

Outline fonts are always trendy because they break the monotony of filled fonts. Bloom is a great option for creating impactful logos that also have a retro vibe.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Bloom Outline Serif Font

Curiosity


Curiosity is a monospace font ideal.

button for more details.

Who says fonts can’t communicate emotions? Curiosity is a monospace font ideal for logos that need to convey an eerie feeling. Make sure you couple it with an easy-to-read font in order not to overwhelm the reader.

A A
50
Select preview text
The quick brown fox jumps over the lazy dog Smart Deals for Web Professionals by MasterBundles Don’t spend extra money on graphic elements, use MasterBundles Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Curiosity Monospace Sans-Serif Font

Rondal


Print-style typeface translated for digital use.

button for more details.

This is another great example of a print-style typeface translated for digital use. If you need to design a digital magazine UI or anything with that vibe, Rondal is a safe bet.

Millenia


Script font for a logo.

button for more details.

This is a great free option if you need a script font for a logo. Our advice is to use it for one-word brands because it gets pretty complicated to read on longer text.

How to find and identify modern UI Google Fonts

UI design is an art. It takes practice and commitment (and a lot of A/B testing). However, we can still give you a few pointers on how to find the best modern UI fonts on Google:

  • Google Fonts are free—completely free. Don’t be afraid to A/B test a bunch to see what works best.
  • Round fonts are trending. Try to find a font that has smooth corners.
  • This article is probably one of the best to get familiar with Google Fonts. It has a rundown of the best ones for UI design and a tutorial on how to embed them in your projects.
  • Go sans-serif, unless you really like serif fonts. Sans-serif is easier to read on-screen and generally makes for a smoother UI experience. Impact has a great article about sans-serif v. serif fonts and explains why the most successful brands tend to go sans-serif.
  • Stay simple. Avoid overly complicated fonts, or users will get tired and switch to easier content. Roboto, Oswald, and Proxima Nova are great examples of easy fonts that will keep users glued to the screen. Try to avoid fonts like Comic Sans, Papyrus, and Bradel Hand ITC. 1WD has a great (or awful) list of fonts you should avoid using in your UI here.

Where to get inspiration & learn

Typography, both in print and digital, is a very extensive topic. We suggest you jump down the rabbit hole (beware, you might never be the same afterward!). Once you have an understanding of how and why fonts work, it will make the daunting job of selecting a typeface for your project a lot easier. We put together a few resources on typography that you might find interesting and useful.

This is a stylish font It has both modern and retro look.

If you are interested in the history of typography we have a great article for you on our blog. It also has tips on the latest typography trends.

This is a great video introduction to typography. If you intend to get serious and learn all about the subject, you should spend the first 30 minutes of your journey here.



The Ultimate Guide to Typography | FREE COURSE


Do you know the difference between a typeface and a font? Tracking and kerning? Learn everything you need to know in our ultimate typography guide.

If you prefer to read, this short introduction to typography is a great place to start. Once you are comfortable with the gist of what typography is and why it’s important, then you will be ready to move on to the next level.

The Elements of Typographic Style by Robert Bringhurst is the one must-read book about typography. The only drawback about this book is that it’s not very visual.

This is a stylish font It has both modern and retro look.

On Web Typography by Jason Santa Maria is great for screen designers. It’s a short read, but one that will influence your work forever after.
This is a stylish font It has both modern and retro look.

Udemy has some of the best typography courses online. This is about logo design, and this is about UI design. They are both highly rated and will leave you with a deeper understanding that will allow you to make better design choices.

Today we recommend to download products on the following topics:

Minimum length 5 letters

Preview Image #1

Drag and drop here to upload your image

1100х1100px ideal for hi-res. 500KB max

Preview Image #2

Drag and drop here to upload your image

1100х1100px ideal for hi-res. 500KB max

Drag or click to upload product

Attach only .ZIP files for sale. 4GB max

Add Media

Drag and drop here to upload your image

750KB max

OR

max 28 items

Pinterest Image

Pinterest Image

Drag and drop here to upload your image

1000x1500px ideal for hi-res, 700KB max

Customize Your Search Engine Listing

Add Category

Please select a category at each nesting level
    License Prices

    Take the worry out of pricing! Turn on auto pricing and we’ll set prices for you based on data from across the site.

    Add Property

      Registration Vendor

      Please note: after registration, you will be redirected to Submit Your Deal page. IMPORTANT. You need to press the submit button again to upload your product.

      Registration
      For vendors only

      Thank you!

      Thank you for your bundle. It has been sent.

      0%

      By the way, if you create fonts, you can upload them to MasterBundles and make money! The process is as easy as snapping your fingers – just use this form. Still have questions? All answers here.

      Conclusion

      Figma is certainly one of the leaders when it comes to modern UI design software. Its integration with Google Fonts makes it easy to find the perfect font for your project. Nonetheless, it is important to get into typography, at least to grasp the fundamentals.

      One last thing: sometimes you need a bigger kick out of your fonts that Google Fonts just might not have. At MasterBundles we always have your back, and you can be sure to find the fonts you need in our store.

      Please take a moment to pin this post to Pinterest

      Figma Fonts Pinterest.

      Figma Fonts Pinterest.

      Article Sources
      1. https://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326
      2. https://www.amazon.com/Web-Typography-Jason-Santa-Maria/dp/1937557065/ref=sr_1_1?crid=3BEUHPL9Q4HSC&keywords=On+Web+Typography+by+Jason+Santa+Maria&qid=1643027122&s=books&sprefix=on+web+typography+by+jason+santa+maria%2Cstripbooks-intl-ship%2C233&sr=1-1
      3. https://www.figma.com/community/file/84391632810433368
      4. https://www.figma.com/community/file/768493324833417304.
      5. https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html
      6. https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html
      7. https://1stwebdesigner.com/bad-fonts/
      8. https://www.creativebloq.com/typography/what-is-typography-123652
      9. https://www.udemy.com/course/typographic-logos-typography-and-lettering-for-logo-design/?gclid=Cj0KCQiAip-PBhDVARIsAPP2xc0UmmAyAJ5i9lu5WvfJ8hLDM1DU0cH4wL1I6m2ZCDjFhh1CRQUFRlYaAo9KEALw_wcB&matchtype=e&utm_campaign=LongTail-New_la.EN_cc.ROWMTA-B&utm_content=deal4584&utm_medium=udemyads&utm_source=adwords&utm_term=_._ag_103426604627_._ad_534046215824_._kw_typography+course_._de_c_._dm__._pl__._ti_kwd-824820814225_._li_1003698_._pd__._
      10. https://www.udemy.com/course/ui-design-bootcamp-master-typography-colour-grids/
      Was this page helpful?