Table of Contents Hide
- Check out this list of modern, super-versatile fonts for your next website or app.
- #1. Gotham
- #2. Open Sans
- #3. Roboto
- #4. Proxima Nova
- #5. Lato
- #6. Avenir Next
- #7. Source Sans Pro
- #8. Nunito
- #9. IBM Plex Sans
- #10. Exo
- #11. Ubuntu
- #12. SF Pro Display
- #13. Corbel
- #14. TT Norms Pro
- #15. Montserrat
- #16. Playfair Display
- #17. Merriweather
- #18. Libre Baskerville
- #19. PT Serif
- #20. Lora
Check out this list of modern, super-versatile fonts for your next website or app.
Have you ever found yourself trying multiple fonts in a design but none of them seem to be working?
And there is usually no good way to resolve this, other than trying out the next font. But the search doesn’t need to be random.
This post is my effort to streamline the choices and make the selection easier for you. I have used information from the best design websites out there and my own aesthetic sense to arrive at this list of 20. The fonts on this list are incredibly versatile and optimised for different web applications, be it a website or an app.
I have also made sure that all the fonts in this list meet the following 5 criteria.
- They should have a modern and minimalist look and feel, and not look like an overkill. This gives an uncluttered and clean appearance and ensures legibility, which is the primary requirement.
- They should be scalable enough to be used across different screen sizes and versatile enough to be used across different use-cases and industries.
- The type family should be openly and freely available online (not necessarily for commercial use!), and it should have multiple weights and styles for designers to pick from. I have added links for each family so you can download and use them for free.
- They should not be overused to the extent that they seem ubiquitous and boring (e.g. Futura).
On the other hand, there are many popular typefaces that are used everywhere and still evergreen due to their supreme versatility. Ubiquity isn’t a deal-breaker when it comes to choosing fonts, and there are often good reasons why some fonts are uses so much.
- They should be usable as both display and body text. Picking a font design for your main content is very different from choosing a font for your title, and remains one of the major decisions for any design. Typefaces that can be used only in headers (and hence most decorative fonts) won’t make it to this list.
Historically, UX designers have preferred sans serif typefaces over serif ones on websites and apps. This is largely due to their legibility and easier scalability on digital screens (though it has become less relevant today as screen resolution has gotten better over the years and many serif typefaces have been optimised for screen usage). Also, sans serif typefaces typically have a more modern, informal and minimalist vibe. This is why you will find more sans serif typefaces in the list below.
In case you are not familiar with the basics of typography, you can check out this article.
When reading about typefaces you may come across terms such as humanist, geometric, non-grotesque and so on. Knowing these classifications will help improve your understanding of typefaces, but is too broad a subject to be covered in this post. To learn more about these classifications, check out this article from fontsmith.com.
Having set the context and expectations, let’s jump straight to the list of 20 (in no particular order).
Note: For the illustrations on this article, I have mostly used regular, medium or semibold weights. You can try out other style and weight variations by downloading the entire family using the links I have shared.
No non-sense, minimalistic and kick-ass readability. Inspired by 20th century architectural signs, Gotham is a geometric sans-serif typeface with a reasonably good x-height, which ensures good readability.
Download the Gotham type family from Cufon Fonts.
#2. Open Sans
Open Sans is the second most popular fonts used on Google fonts, and for good reason. It is classified as a humanist typeface, rendering a neutral but friendly appearance. It boasts excellent legibility across print, web and mobile interfaces.
Download the Open Sans type family from Google Fonts.
If you’re a designer, you know Roboto. Developed by Google in 2011 for usage across Android OS, it’s not difficult to understand why it’s a killer font for digital user interfaces. It continues to be the default font for Android to this date.
Download the Roboto type family from Google Fonts.
#4. Proxima Nova
One of the moser versatile and well-known typefaces, Proxima Nova is equally suited for both print and web usage, and has been aptly called ‘Helvetica of the web’ by designers. Much older than some other fonts on this list, its rise among web designers was aided partly by other simple, geometric sans-serif typefaces, most notably Gotham. Proxima Nova combines geometric shapes with modern proportions, and finds widespread usage both as display and body text.
Download the Proxima Nova type family from Adobe Fonts.
Originally conceived for corporate usage, Lato features a sleek, neutral look which makes it a perfect fit for body text. At the same time, it retains some of the originality and shapes when used in uppercase and at large sizes, giving it a harmonious appearance.
Download the Lato type family from Google Fonts.
#6. Avenir Next
Avenir Next is one of the most popular geometric sans-serif typefaces, and the orignal Avenir was designed as a real alternative to the seemingly-rigid Futura (another ubiquitous font). Over time, the weights and styles were expanded upon, along with more changes to optimise the font for various interfaces. It is equally successful for on-screen and print applications, and Avenir Next Pro is the latest typeface in the series.
Download the Avenir Next type family from Cofonts.
#7. Source Sans Pro
Designed as Adobe’s first open-source typeface, Source Sans Pro was meant to be primarily used for UI projects. The typeface has a high degree of legibility, and is well-suited for long-form content as well.
Download the Source Sans Pro type family from Fontsquirrel.
A balanced sans-serif typeface, Nunito uses rounded ends on characters (see the endings on the lowercase ‘l’ and uppercase ‘N’) and was originally designed for usage as display text. A non-rounded terminal version, Nunito Sans is also available.
Download the Nunito type family from Google Fonts.
#9. IBM Plex Sans
This typeface is probably best described in IBM’s own words: ‘It’s global, it’s versatile, and it’s distinctly IBM.’ It tries to strike a careful balance between the man and machine, the natural and engineered. Evergreen in its design, has been thought of as a modern alternative to the famous Helvetica Neue. It is also optimised for improved legibility at smaller sizes.
Download the IBM Plex Sans type family from Google Fonts.
Designed as a contemporary geometric sans serif typeface, Exo renders a futuristic/tech-y look and feel to characters. With 9 weights, it boasts great versatility. The most common usage of Exo is in display text, but it also works well with text of small to medium size.
Download the Exo type family from Google Fonts.
As the name suggests, Ubuntu is the default font on Ubuntu OS and was first used in 2010. The font was primarily designed for use on digital screens, and the spacing and kerning is manually optimised for usage as body text. It employs curvy ends to letters and has a distinct, contemporary style.
Download the Ubuntu type family from Google Fonts.
#12. SF Pro Display
SF Pro Display is most notable for being used by Apple on macOS and iOS. This neutral and versatile sans serif font features nine weights. It is a variable font that incorporates variable widths in conjunction with weights and optical sizes.
Download the SF Pro Display type family from Cufon Fonts.
Released for the first time in 2007, Corbel is a humanist sans-serif typeface that is specifically designed with UI in mind. It aims to give a simplistic, clean and uncluttered appearance on screens, and the softer curves ensure good legibility even at smaller sizes. An excellent choice for body text!
Download the Corbel type family from Dafont.
#14. TT Norms Pro
This is probably the most modern typeface (as per release date) on this list. The inspiration for the designers was to create something that will be extremely versatile across different applications and employs classic character proportions, while retaining a stylish, modern and neutral look.
Download the TT Norms Pro type family from Cufon Fonts.
I deliberately kept Montserrat for the last. Designed in 2011 and taking inspiration from urban typography, this geometric sans-serif typeface has been incredibly popular amongst web designers and has been used across millions of websites over the years. But as stated earlier, ubiquity isn’t a deal-breaker when it comes to fonts. Montserrat is also frequently seen as an alternative to similar sans serif fonts such as Gotham and Avenir.
Download the Montserrat type family from Google Fonts.
Although relatively less common in web usage than their sans serif counterparts (especially in apps), the popularity of serif typefaces on websites has been slowly regaining popularity. Here are my 5 best picks (in no particular order).
#16. Playfair Display
Download the Playfair Display type family from Google Fonts.
Download the Merriweather type family from Google Fonts.
#18. Libre Baskerville
Download the Libre Baskerville type family from Google Fonts.
#19. PT Serif
Download the PT Serif type family from Google Fonts.
Download the Lora type family from Google Fonts.
Read the full article here