The main rule: Do not use more than three font types in one project unless you have a good reason for that.
This rule is because almost all pages of the site consist of the same mandatory elements: title, main text, and design elements (footnotes, quotes, descriptions of images). If you use more than three kinds of fonts in these types of content on the page is lost all the hierarchy, everything will look confusing and “dirty.”
Recommendations for the selection of fonts
- Hyphenated classical formal, suitable for texts and headings
- Gothic is used for titles only
- Slab-serif for trendy projects, suitable for headings only
- Sans serif modern, which can be used anywhere
- Handwritten is best used in informal documents in headings
- Decorative is used only for decorating certain sections of text
Choosing a font for the site
Once you’ve decided on the message your site should carry, it’s time to choose the perfect font for that purpose. You should select different fonts for blogs and commercial websites. The number of fonts at the moment is simply immeasurable – there are paid as well as free options. The font world is currently dominated by two major companies, Google and Adobe.
- Google Fonts – offers free fonts created by professionals.
- Adobe Fonts – fonts are offered in a single Adobe Cloud subscription package.
The main advantage of these two font packages is that they are created by professionals and are great for both the Web and typography. These fonts are easy to download and use. What can not be said about third-party versions can be downloaded from the Internet at various thematic sites and forums. How will work such a font – do not know, all at your own risk.
What should be paid attention to when choosing a font for the website:
The thickness of the font.
It is worth choosing those options with at least three different thicknesses (light, regular, bold). This will make it possible to use a single font on the page and create the necessary logical hierarchies between text blocks. This will also be useful if you have readability issues, about that below.
Readability check
After choosing a font with a good set of different thicknesses, it is necessary to check how it is displayed on mobile and desktop versions of the site. After all, when displayed generally on a large screen, the font may not be readable on a mobile device. This can happen, especially with a very thin (“Lite”) font. But since the font has several thicknesses, it shouldn’t be too hard to make it a little thicker where needed.
Combining fonts
Knowing how to combine different fonts is a whole science. Since choosing several fonts for the site, you should understand that they should be connected. Fonts should harmonize on the page; they should maintain a specific contrast. And ultimately, these fonts should convey to the user site that the message was laid at the beginning.
Experts in web design feel and know what fonts should be used together. But for beginners, this can be a problem, and it will be a stumbling block. But for such people, there are aids on the Internet. For example, when you choose a font in Google Fonts, the system automatically suggests matching fonts. Or you can use fontjoy.com – it automatically picks up checking fonts. You just need to click on the button “Generate.”
Font size
When choosing a font is also important to consider its size because this will directly depend on the speed of loading the site. And you should think about using two or more fonts on one page because it can seriously increase the time it takes to load pages. After choosing a suitable font to test the download, if it will not be satisfied, pick up another, more “light” font.
Compatibility of browsers
Now it is less common, but it has to be. When choosing a font, it is also worth checking on the various popular Internet browsers because some fonts may not display in specific browsers or give errors.
Secondary fonts
Despite all the display and performance tests, problems will occur. Therefore, it is recommended that you choose a secondary font that will continue the unified design of the entire site. It will be displayed if the original font is not displayed. This will keep the suitable design of the whole place under control, even when something has gone wrong.