After we finish designing the site (creating the so-called wireframe), we need to pay attention to another important element before we jump into the visual part. This element is typography.
The Bulgarian language does not distinguish between Typeface and Font. Both words mean font. However, in English, there is such a difference. In fact, the two terms are different, although people often think otherwise.
Typefaces are actually families of fonts. And the concept of font in English (font), we can actually express as an equation:
Typeface + style + size = font.
That is, we need a family, styles and size of the characters to have a font.
Font Selection
In the article dedicated to fonts, you can find more detailed information on how to choose appropriate fonts, but the main guidelines are to consider the need for different fonts for titles and for the main texts and to keep in mind that the lower the density of the letters, the easier they are to read (as long as we don’t overdo this rule). Too thick letters are difficult to read, but so are too thin ones. You could increase the density of titles, for example, since they should not only attract more attention, but are also expected to be shorter. In addition, titles are usually significantly larger than regular text, which means that the distances between letters and within them can be seen more easily, no matter how thick the font.
Don’t make your site users read long texts where each letter starts to look more and more like a black shapeless spot.
Length and alignment
This refers to the direction in which your text sits (left, right, and justified) and the length of the line, expressed in number of characters (including spacing). The recommended line length for a computer is 50-60 characters, while for mobile devices 30-40 are recommended.
You can control the number of characters by controlling the font size and the box in which the text is placed, as well as the spacing from the edge of the element or display, depending on the device used.
Scale and Variations
Scale and variation refer to how each type of text (heading, subtitle, body text) relates to each other and to the environment in which they are found.
For example, the title, as we already mentioned, should be clearly larger than the body text, but you should also have different types of headings that you use in different contexts. On some pages, you may have chosen a slightly different design, with dynamic pages (posts and categories) having one form of heading, while static pages, such as Contacts and About the site, have another. If your design also has different containers or designs for different pages, you should have different sizes, colors or even fonts prepared for the different contexts in which you will use them.
Contrast and Style
This refers to the visibility and appearance of text. If you wish, you could use tools that measure the accessibility of your design for people with visual impairments. These tools will help you understand whether you are using too light colors on too light a background. In other words, does your font have enough contrast against the background it is on?
Meanwhile, you should match the colors of your chosen font to the color palette of your brand already available.
Spacing
When determining the typography of your project, you should also pay attention to the distances you will place between different types of text, as well as the internal distances within the same text.
In other words, how far will the title be from the subtitle and the subtitle from the main text, and how far will one line be from the title to the next line.
Dark mode/Light mode
If you have decided to offer your users dark mode, then make sure that you have selected the right colors for the background, as well as for the font when changing from light to dark mode and vice versa.
