5 Best Fonts for Good UI Web Design in 2020

Branding, Web Development

Let’s kick off with the basics: what is a font? It is the visual representation of text that can come in varying typefaces, point sizes and even weights. Typography is important and it involves the font style, from its structure to appearance. Hence, this medium of communication is more than just a string of words. Wielding the right fonts when establishing your brand guide or for use in your website design can illustrate the right emotions and messages you wish to communicate. 

At the rate of today’s digital consumption, it is vital for an effective User Interface (UI) Design and the choice of font can be your very one differentiating factor. A subtle, yet key aspect of your website, the usage of fonts can be to your advantage when building your next UI. As a web designer in Singapore, we all know how much time is spent on deciding on the right fonts and pairings to convey the right messages. So we bring you 5 fonts to be the cherry on top for your next UI this 2020!

1. Open Sans

Designed by Steve Matteson and commissioned by Google,  Open Sans is a humanist sans-serif typeface with five weights. A well-known and modern font, it is widely used across the print, web and even mobile interfaces. It aces legibility, versatility and even pairs well with many other fonts! Using this easy-to-read font can aid your users to perceive information comfortably due to its neat and clean presentation. Explore the different weights and choice of colours to suit it best to your brand. Reflecting professionalism, this beautiful font can easily gain the trust of your consumers in your next web design.

Best paired with: Libre Baskerville, Lora, Montserrat, Playfair Display, Nunito, Nunito Sans

2. Montserrat

A geometric sans-serif typeface, Montserrat is a typeface adored by many web and UI designers. Inspired by the signages in her hometown, Montserrat is a distinctive font produced by designer Julieta Ulanovsky which is free for personal and commercial use. Targeting the usability design aspect in UI, Montserrat can be your determining factor if users continue to seek information and get to their desired destination in your website.

Best paired with: Open Sans, Playfair Display, Lato, Lora, Didot

3. Playfair Display

The first serif font in this list, this font displays (😉) an old charm, yet with a modern touch. Best suited for headers and subheaders, Playfair Display is a sophisticated font that works great for websites and mobile applications. Give it a go and use this font for your portfolios or blogs even!

Using this font as your header or subheader can be of big advantage to you as it aids with information hierarchy. This allows you to categorise your content in accordance with its importance. Help your audience determine the information that they should look out for first. Use different font types and sizes to differentiate the texts that are most important. With this font, you could use bigger font sizes for headers and it stands out as information that your user should pay attention to. 

Best paired with: Roboto, Lato, Open Sans, Poppins, Georgia, Futura 

4. Roboto

This Google font is a classic and versatile font style that pairs well with multiple other fonts. It is clean and bold typography that was created by interface designer for Google, Christian Robertson. The Roboto typeface has 4 families with multiple weights:

Perfect for websites, this extensive range of font families is yours to play around with when exploring readability and content density in your typography. Ensuring that there is enough space to breathe between your design elements and even within your text modules, will allow your website users to have reading comfort while improving usability.

Best paired with: Roboto Slab, Open Sans, Lato, Playfair Display, Montserrat, Roboto Mono, Oswald

5. Gotham

Another sans-serif to our list, this font is inclusive of a lowercase, italics and a comprehensive range of weights and widths. This allows you to express your brand’s products or services in whichever way you wish to. Plus, with Gotham, you are able to present your site with some rhythm due to its range of typefaces. When your audience remembers the typefaces used in visuals, this shows how a font is of great value to your branding. With the help of typography, your presence is then further differentiated from the rest and it works as an identification for your audience.

Best paired with: Open Sans, Brandon Grotesque, Roboto, Futura

Trends come and go but it’s important to be on top of them. Identify web design trends that may dominate the year 2020 and work your typography to best represent your brand or company. Looking for a web designer to create effective typography in Singapore? Hit up our sales team so we can tailor a solution just for you!

Share
Scroll to Top