Top 5 UI fonts for website & mobile apps
“Content is King” — And has been, way before Bill Gates published the essay on Microsoft website in 1996. And with today’s digital consumption, designing a great user interface means offering content in a usable format that encourages reading and engagement. We have often observed that users skip reading if the content is not presented in a legible fashion.
The most popular platforms today — Facebook, Whatsapp, Twitter — are all content centric to say the least. Even visual-heavy platforms like Instagram and Pinterest, need an underline of text to add meaning to visuals.
“Although many books define the purpose of typography as enhancing the readability of the written word, one of design’s most humane functions is, in actuality, to help readers avoid reading.” ~ Ellen Lupton
Typography has never been as essential as today, in the digital era, to define and cater to a user’s requirements. A font’s primary job might seem to inform and facilitate legibility. However, there’s a lot more — personality, tonality, expressions, emphasis, engagement are some of heavier psychological requirements from a font today.
In our experience as a UX focused company, a font can easily be the most subtle, and yet powerful differentiator for the next UI we are building. Here are the top 5 UI fonts that you may use in your next website or mobile app.
1. Open Sans
Open Sans is a humanist sans serif typeface designed by Steve Matteson. Open Sans was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.
Best used for: Websites and Mobile Apps for prolonged usage and legibility. Open Sans is easy on eyes and can be good for regular consumption. A great use of Open Sans is in Body Copy or Navigational elements. Try 12–16px for main Content and 24–30px for Headings.
Best paired with: Montserrat, Brandon Grotesque, Playfair Display, Georgia and Source Sans Pro
Current Use Case: Paytm
Font Source: Google Fonts
2. Montserrat
Montserrat is a new libre sans text typeface for the web, inspired by the signage found in a historical neighborhood of Buenos Aires. Montserrat is a geometric style of type that has subtle optical adjustments. The result is a sans serif family with multiple versions and multiple possibilities, both in the editorial and corporate realm.
Best used for: Minimal and modern Websites & Mobile Apps. The geometric type, optimised for digital usage, is best used in minimal User Interfaces. Great for headings, even in caps. Try 14–18px for main Content and 28–34px for Headings.
Best paired with: Open Sans, Source Sans Pro, Roboto Slab, Gill Sans and Lora
Current Use Case: Knowing Design
Font Source: Google Fonts
3. Playfair Display
Playfair Display is a serif font. This font takes influence from the designs of typeface designer John Baskerville. As the name indicates, Playfair Display is well suited for titling and headlines. It has an extra large x-height and short descenders. It can be set for instance in news headlines, or for stylistic effect in titles.
Best used for: Stylised, elegant and sophisticated Websites & Mobile Apps. This stylistic font is best used in agency, portfolio websites, travel and fashion blogs. Great for headings and quotes. Try 34–38px for main Content and 84–92px for Headings.
Best paired with: Open Sans, Lato, Roboto , Georgia, Museo Sans and Proxima Nova
Current Use Cases: Vogue, Spain, BMW
Font Source: Google Fonts
4. Roboto
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.
Best used for: Since it has been part of the Google family and served as the default Android font since 2012, it works well as the default app font including chat app, ecommerce and more. Great for body copy text and navigation. Try 14–18px for main Content and 28–34px for Headings.
Best paired with: Open Sans, Lato, Roboto , Georgia, Museo Sans and Proxima Nova
Current Use Cases: Google Material Design, Gmail (future)
Font Source: Google Fonts
5. Proxima Nova
Proxima Nova bridges the gap between typefaces like Futura and Akzidenz Grotesk. The result is a hybrid that combines modern proportions with a geometric appearance. Proxima Nova, by many measures has replaced Helvetica as the world’s most popular typeface.
Originally released it in 1994 as Proxima Sans (now discontinued), it expanded into a full-featured and versatile family of 48 fonts (eight weights in three widths with italics). In the last few years, Proxima Nova has become one of the most popular web fonts, in use on thousands of websites around the world.
Best used for: Modern, Content-centric Websites & Mobile Apps. It’s already a hit font with most of the content platforms. Equally great for headings and body type. Try 12–16px for main Content and 24–30px for Headings.
Best paired with: Skolar, Adelle, Adobe Garamond, Georgia, Museo Slab and Playfair Display
Current Use Cases: Buzzfeed, Mashable, CNET
Font Source: Typekit
Having spoken to multiple users, it is certain that fonts are one of the most sub-conscious methods of inducing personality in to a UI. Though we have shared Top 5 UI fonts here, we’d love to share more, perhaps in a follow-up post soon. We are also working on a post about Top fonts for branding & communication. Let us know if either of these will interest you.
Do you have any favourite fonts for UI? The easiest way to reach us for a quick chat is through Twitter. You may email us as well.
You can follow/reach us further on Instagram, Facebook and LinkedIn.
