Best Practices for Good Typography

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

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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%.

7. 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.

8. 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 is the way text looks on a page or screen. It’s about arranging letters to make them easy to read and nice to look at. 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. Good typography helps us read better, while bad typography makes it hard.

In this article, we will be talking about what Typography is in Web Design along with the typefaces, importance, and practices to follow and avoid in Typography.