A user’s interaction with a given product is vital in design. Any application should be intuitive, easy to use and establish a connection. In this article we give you 8 Rules of Typography For Beginner-Level UX/UI Designers.
One essential tool for accomplishing that is the text that informs, guides, and entertains the user. Therefore, the UX/UI design of the text, also known as typography, plays a crucial role in this process. That is why every professional UI and UX design agency must have a comprehensive understanding of this matter. Luckily, we will help you learn everything you need to know on this topic.
Making the UX/UI copy in your digital product easy to read and understand helps optimize readability and accessibility. It improves the loyalty of the users who will use the product consistently. While content is essential, let’s focus for now on the graphic side of things.
Table of Contents
Rule 1. Use 2-3 Different Fonts, Not More
Why do you need to limit yourself to a specific number of different fonts?
Do not use more than three different fonts on one site. Otherwise, it will look unstructured and unprofessional. Keep in mind that fonts of different sizes and styles in one text can undermine the cohesion of a layout.
To avoid such situations, try to minimize the number of fonts used. Also, make sure that the headsets complement each other and that the width of their characters matches.
Rule 2. Try to Use Standard Fonts
Not everyone has access to the same font. So, even the coolest customized fonts can be a problem. The font may look different on the screens of your users than you intended.
Most users are accustomed to standard fonts. Therefore, they read familiar texts faster and easier. Even if you can afford to pay professionals to develop fonts, it is usually advisable to stick to the standard ones.
Rule 3. Limit the Number of Characters
The number of characters in a line determines how readable your text will be. The more intricate the typography is, the shorter you should keep each line. About 60 characters per line keep texts easy to read – line length is the fundamental key to readability.
For mobile devices, a length of 30-40 characters is preferable since the screens are much smaller.
To achieve the optimal number of characters per line, limit the width of the text blocks.
Rule 4. Choose a Font Family That Looks Good in Any Size
Users can access your site from different devices with different screen sizes and resolutions. Most user interfaces contain various elements (like buttons, clickable logos, headings, and so on), so it’s vital to select a font family that looks good regardless of the user device.
Tip: elaborate fonts like Vivaldi’s will be complicated to read on small screens. If possible, choose something simple.
Rule 5. Use a Font With Distinct Characters
Some fonts make it difficult to read letters that look alike, especially like “I” (capital i) and “l” (L). Also, when the letters in a font are too close to each other, it can cause the same problem. For example, “r” and “n,” if written close together, look like “m.” Therefore, when choosing a font, make sure to check it in different contexts to ensure that it does not cause users problems.
Rule 6. Caps Are Not an Always-To-Go Option
Text written in capital letters only is suitable for those cases where it does not require an extended reading (for example, abbreviations or logos). But where it is necessary to concentrate, it is better not to use this technique.
Compare: TEXT WRITTEN IN CAPITAL LETTERS IS ONLY SUITABLE FOR CASES WHERE IT DOES NOT REQUIRE READING A LOT OF TEXT (FOR EXAMPLE, ABBREVIATIONS OR LOGOS). BUT WHERE CONCENTRATION IS NECESSARY, IT IS BETTER NOT TO USE THIS TECHNIQUE.
Rule 7. Line Spacing Is Important
Increasing spaces between the lines make the text appear more light and airy and, therefore, more readable. There is an informal rule that line spacing should be 30% greater than the height of the characters themselves increases readability. Experiment with it and check how the changes in line spacing shift how you and your users see the text.
Rule 8. Use Contrasting Colors
Text should contrast with the background if you want your users to read it. The World Wide Organization (W3C) has recommendations on the contrast ratio.
Tip: color blindness is a widespread disease, especially among the male population. Therefore, it is recommended to use additional tools, in addition to color, to highlight important information.
We hope these 8 Rules of Typography For Beginner-Level UX/UI Designers has been helpful. Typography helps us transmit important messages and makes digital communication more effective. Use the tips from this post in your UX/UI design to display content wisely, without creating an additional cognitive load for the user.
Join The Logo Community
If you would like more personal tips, advice, insights, and access to our community threads and other goodies join me in our community. You can comment directly on posts and have a discussion.