Typography Best Practices

Here are a few best practices you should follow for perfect typography in your interface design:

• Visual balance: We have to make sure that the font properties especially the font color go well with the other visuals in the design, as well as we must make sure that the font matches the mission we want to communicate through the website or application.
• Use a limited amount of fonts: A lot of fonts being used on a page makes it stressful for the users to look in. Many UI designers recommend to only use two fonts in a website or an application, rather change other properties if the fonts to make them distinct. You can do that by changing various properties of the font like, font weight, color, line height, spacing etc.
• Line Height: Line height simply is the spacing between two adjacent base lines. An 100% line height will make your text look cluttered and compact. A perfect range of line height is somewhere between 120% to 180%.
• Line Width: Make sure that the text line-length/line-width is not too long. The problem with longer lines of text is that it becomes harder to read on a screen. Therefore, make sure that you have a good size to check your line length.
• Font Sizes: A very important practice in typography for web design is to make sure that you are using readable font sizes. When it comes to body and paragraph text a minimum of 16 to 17 points is the perfect font size. Use at least 15 pixels for long text and at least 14 pixels for dense interfaces. This is the font size that takes most of your webpage/application’s font.
• Proper Typography contrast: Contrast can be created by using two distinct fonts rather than similar ones, by changing the font weight, by changing the text spacing, or through font color and background color. While creating typography, we should also take in account how the typography is going with the overall contrast of the design.
• Proper use of plugins: There are so many plugins like Count text in Adobe XD, Font Fascia in Figma, etc. that you can use to enhance your work flow, increase your productivity and improve your output.
• Mobile typography: Whenever you are using large headings make sure that when you design the mobile version of the application/website, you scale those large headings down. Adjust the font size accordingly for the mobile version of the application or the website.

Typography simply is a technique in user interface design to create readable, appealing, attractive, and easy-to-eye text for users to read. Typography plays an integral role in any website’s design. Other than the visual elements, text is the most important form to communicate with the users, sometimes, text is even more important than the visuals itself. Therefore, we as designers must focus on this aspect of UI design.

In this article, we will discuss how to make the most out of your typography using typographic hierarchy.