The user, visiting the site, looks at the whole design and usually does not pay attention to details (if their work is not related to this). But, on the other hand, all these details and make a holistic perception of the site.
Typography is one of the important components of design. With correctly selected fonts, you can emphasize important information and most fully convey to the user the main idea of the site. Conversely, a poorly selected font can dramatically change the impression of the site.
This article summarizes the main points that could help streamline knowledge in typography. For a start, analyze concepts:
Today, these two concepts are often confused or considered interchangeable. The main difference between a “font” and a “typeface” is that the first is part of the second. For example, Helvetica — is a typeface, a full set of characters without serifs with the common characteristic design. However, it consists of a whole collection of fonts, each of which has a specific thickness, style and size, different density levels and italics.
Most designers are used to the fact that when choosing a font, we select its font style by name. Then we indicate its parameters. Therefore, in a conversation, and when writing articles, you can often see the “font”, although it would be more correct to use the term “typeface”. But if, for example, the creative director asks you what font you used in the project, then he probably wants to know the exact details. Then, Helvetica would be the typeface chosen for the project, but the font could be Helvetica Regular 16. But, of course, when talking with customers, it is better to use more understandable terms.
5 font families
The next thing worth paying attention to is the division of fonts into 5 main types:
- Monospace (fixed length font)
- Cursive (font imitating handwriting)
- Fantasy (decorative font)
Further, each font has its own characteristics in the style and differs in the thickness of the lines of the style and the slope of the serifs.
You can read more about these differences in the article “A guide to recognising font styles.” In this article, the author pretty well describes the difference in fonts with great examples.
Learn more about font selection rules
Now I will give the basic rules for typography. They have already been described in detail by many designers, so briefly.
- It is better to use 1–2 typefaceon a site
- For each typeface, usually 2–3 weights are sufficient. For example, a heading, body text, and possibly one for large headings. Also, it is better to avoid overly black and thin print (ultralight)
- Try to use Fantasyfont only on small sentences or headlines. (Users are more familiar with standard fonts, so they can read them faster)
- Do not write all the text in capital letters. It is believed that this way a person perceives the headline as an image and does not read the text
- Leading (Line spacing) must be greater than the height of the characters (size)
- Line length for a desktop 60–70 and for the mobile version 30–40 characters
- Need enough contrast of the text with the background
- It is better to avoid coloring the text in red or green
- You can also make the difference between the title and the text at times considerably, so it will be more emphasis
- Also, the text cannot be separated from the design, so do not forget to use: tracking (letter spacing) and Leading (line spacing)
And the last thing I would like to pay attention to is the selection of a pair of fonts. You can combine fonts from one front family or in contrast, that is, here you need to pay attention to serifs. Examples of sites where you can see pairs of fonts Fontpair and Typewolf.
Good typography is a quality that a person, when entering your site, does not notice, but feels.
Thank you for reading! Have good day! ☕️☀️
My portfolio on Behance 🙇🏼♀️