Tips for a good use of typography in UI design

Using typography in UI design is a bit different from graphic design. It is not just about appearance but also its degree of usability. If you are in the process of creating the UI for an app or website, don’t take the typography choice lightly.

This guide shares tips and suggestions related to web fonts and their use in your products.

Theme, audience and UX

Typography in UI design is not only based on the interface design at a visual or aesthetic level. It’s also linked to UX design through psychology and perception. Before using particular typography in an app or website, you must consider certain points.

Answer these questions to clarify the product goals. If it is not your own project, ask your client.

  • Which theme will be used and for what purpose? (Sell, educate, inform, inspire, etc.)
  • Who is the real target public of the product, and who are the users?
  • What is the expected emotional impact on users when they use the product?
  • In which formats, devices and locations will the product be used?
  • Will the final product contain a large amount of text, or will it be more interactive?
  • What is the user flow?

As a UI designer, it’s a good idea to be in close contact with the UX designer. Find out about their research work and what the results were. Learn about the usability flows and what the user is expected to do. 

When you have the answers to these questions, you’ll be able to give the UI the personality it needs through typography. For example, in the case of an app for the remote control of lights and alarms at a retail store, the typography used must inspire security and control, plus it must be quick and easy to read.  Retail store managers are the target public, and therefore the content will have a large amount of numbers, which must also be easy to read and decipher.

Free Code Camp offers a comprehensive guide with suggestions and real examples if you want to learn more about the archetypes of typography.

typography in UI design

Select fonts according to the strategy

Now, it’s time to find web font options for the project. Google Fonts is always the best place to start. Whenever you use Google Fonts in your UI designs, you can be sure that your designs will be displayed perfectly on any search engine, device or operating system. 

If you want to use a font not available on Google Fonts, you can add it to your CSS stylesheet and include alternative options. However, it’s worth remembering that this practice will slow down the performance of your digital product.

Use the search engine with filters on Google Fonts until you find the fonts most suited to the project strategy. Start by downloading your first selection of fonts. Think about the titles, the body text, the buttons and the numbers. It’s all important.

Select groups of two fonts and do some tests

Typography, like all the other elements in a design, requires a hierarchy system. Complementary or similar fonts must be used to achieve a smooth and balanced visual hierarchy. One option is to use two individual fonts that work as a pair or a single font in different styles or widths.

Create two or three font groups and test them with the project content and visuals. If there are other people in your design team, now is the time to put your heads together to finalize the selection. 

typography in UI design

Create a style and hierarchy guide

In the case of typography sizes and hierarchies in UIdesign, there are no hard and fast rules, but there are certain recommendations. For example, if most of the UI follows an 8-point grid, so must the typography.  

The exact hierarchy for your project will depend on its purpose and on the user tests carried out. You could start with the following hierarchy:

  • H1   36px
  • H2   28px
  • H3   24px
  • H4   21px
  • P       18px

Don’t forget to create two different hierarchies for websites and mobile devices. The sizes used on websites will not always be the best option for viewing the product on a mobile device. Test the combinations on real computers and phones in several different screen sizes.

If the product is largely text-based, such as blogs and digital magazines, the body text must be at least 16px. The texts can be smaller for more interactive products, such as a calendar with several features

typography in UI design

Complement your typography with the best icons

Once you have completed the typography work in your UI, it’s time to select the perfect icons for your design and theme. Log in to your Flaticon account and create a collection with the illustrative icons you need. Use the search filters to select styles, colors and thicknesses. 

When you complete your first collection, link Flaticon to your stylesheet and add UIcons in the desired format and styles. If you are designing in Figma, use Flaticon UIcons by creating a copy of the file from the community. Then, simply activate it in your project. Here is a short step-by-step tutorial on how to do it.  And, if you want to discover how to use UIcons in Figma, check out this post with all the details.

Flaticon offers you more and more design solutions. In addition to UIcons for your UI designs, we also offer millions of icons in various styles and for multiple uses. Become Premium at very little cost, and you’ll get access to all the resources without attribution and with a commercial license.