Rules for creating typography for interfaces
“Web design consists of 95% typography”
– Oliver Reichenstein
Typography is one of the most important assets we use when creating an interface. It helps us deliver clear and effective messages, engage people emotionally, and convey brand identity. Unfortunately, some sites ignore the importance of typography.
Therefore, these sites have a bad influence on brand perception and have a bad UX.
Typography, brand, and users
To optimize the user experience, the headset needs to match the tone and voice of the brand. In my opinion, MailChimp is one of the best examples to illustrate this concept. They perfectly embodied the brand identity by choosing a font called “Cooper light”for their titles. This font is individual in its own way and conveys a friendly and accessible image declared by the brand.
Since people visit the site not to enjoy its design, but to read the content, when choosing a font, you need to understand what we want to convey. For example, do we want them to feel relaxed, happy, or excited? The font must match the brand attributes and the artistic direction of the site.
Each time you choose a font, make a list of words that match the tone and voice of your brand. This will help you describe the feelings and moods that you want to reflect using fonts.
By understanding the relationship between typography, users, and brand, you can confidently choose the best font that will help your design achieve its goal.
Choosing the correct font
To select the correct font, it is important to consider the context of use and the purpose of the font in the interface. You should always ask yourself: will the selected font be applied to titles, text, links, call to action, or navigation? Special attention should be paid to the choice of typefaces for large text – the wrong font will tire the reader.
Read also: 6 common mistakes in adaptive web design
I usually use Google Font or Adobe Fonts (Typekit) to search for headsets. Both resources provide a selection of high-quality fonts optimized for the Internet. I avoid using fonts that are available on free sites or little-known resources. Because they are often not tested and of poor quality. It is also recommended that you select a maximum of two fonts so that the interface design is consistent.
As a designer, you should know that when working with typography for the Internet, readability and legibility play a very important role.
Legibility is the reader’s ability to distinguish letters when reading. Here are the factors that contribute to the legibility of the font:
Display fonts are designed to be used in large sizes. They are ideal for headlines, as they are clear, visible, and stand out from the background. However, these fonts are less readable at a smaller size and should not be used for the main text. One of my favorite fonts for titles is “BEBAS NEUE”.
Serif and sans-serif fonts
We mainly work with two groups of headsets: serif and sans Serif. Traditionally, serif fonts were always more legible and were often used to print long passages of text. As web trends and design evolve, more and more sites use serif fonts, which look very good if you choose them correctly.
However, sans-serif fonts are more often used for the main text because of the simplicity of letter forms. Such fonts make the interface easier to understand and reduce the cognitive load of users.
I prefer to use sans-serif fonts for the main text and sans-serif fonts for headers. But, I always try several combinations and choose the one that fits most into my design.
X-height is an important characteristic to consider when choosing a font. The fonts that are best suited for the main text are fonts above the X-height. The higher the x-height of the font, the more legible the text will be. This is an important rule to keep in mind when choosing fonts for the main text.
Read also: 15 important terms in web design
The fact that a font is legible does not mean that it is readable. In fact, readability is a level of understanding and visual comfort when reading. If you are distracted by the appearance of a font when reading, it is likely that this font is not suitable for text.
The line height defines the space between the lower lines of lines in a text block. There is no true ideal line height, because each font is different. However, the optimal height is considered to be between 1.2 and 1.8 cm. a Small line height can make it difficult to read text because the lines are too close together.
Line spacing is the distance between paragraphs. Always keep the paragraph spacing between 0.75 x and 1.25 x of the font size.
We need to make content available for people of all ages to read. Therefore, the font must be large enough. Choosing a font would be good to stop at 16px or 1em, at least. People are busy and often browse the site in a hurry, so it is important that the content can be quickly read and understood.
If the line is too long, reading causes eye fatigue. Therefore, the string length should be between 40 and 70 characters maximum.
Hierarchy and contrast
Good text contrast is important for easy reading. This is an important principle to consider when creating a proper and consistent content hierarchy. A successful hierarchy divides content into easily digestible and scanned parts, allowing the reader to remember the text.
Once you understand and master the principles of typography for the Internet, your design will become more attractive and effective, because typography is content and content is UX.
Be sure to remember that the design should not only be beautiful, but also functional. Here are some useful resources that you can use to improve your typography skills: