9 site typography tips
Typography for a web site is a rather important design element, which in RuNet is somehow not very pronounced. This issue is often raised on English-language foreign design blogs, we practically do not pay attention to it. No, of course, when creating a layout, most designers think about fonts, design, but it’s very modest and small. Therefore, probably, in RuNet you can count the number of projects with bright creative and non-standard typography on fingers, more than the standard dull “gray” design 🙁
Perhaps this is why Dmitry Naumov decided to share an interesting guest post on the topic. Dima in combination, by the way, is the author of a very useful project Converlab – “Design. Usability. Conversion.” So, we will go directly to the tips, they will be a great addition to the article on website typography trends.
1. FONT SELECTION
A lot depends on the choice of font. The font design determines the mood, conveys the “character”, and indeed has a strong influence on perception. Choose the font that matches the style and concept of your site. For example, for a “traditional” design, a traditional serif font, such as Times Roman, will be used; for a “modern” design, a sans-serif font — Arial or Helvetica;
2. FONT SIZE
Of particular importance is the font size of the body of the text. The heading / subheadings can be grotesquely large and awkward, but the main text should be comfortable, which is possible only with the optimal size. Usually it is 12-16 px;
We also recommend reading:
10 best google font fonts for titles – free and most popular solutions;
CSS styles for website headers – examples of design through CSS code.
3. SET OF STYLES
The font should not be monotonous; it is not pleasant to read the gray mass. Design a style system for headings and subheadings (H1, H2, H3, etc.), quotes, body text, and the like. Use for this different font sizes, options for its style, perhaps for contrast for this purpose use another font (especially for headings or quotes);
Important places in the text must be highlighted – in bold or in italics. The main thing is not to overdo it. The emphasis is on that and the emphasis then that it should be used in a metered way;
5. COLUMN WIDTH
In traditional typography, much attention is paid to the width of the column, for this reason the text is divided into columns in newspapers and magazines. If the line is too long, it is not convenient to read it. Because you have to look too far from the end of one line to the beginning of the next. A short line is also not good. The optimal line length is in the range of 70-140 characters;
6. INTERLINING (LEADING)
Leading (Leading) – the distance between the lines. If it is small, it negatively affects readability. Too big Leading also does not bode well. In general cases, leading is probably 2-4 points larger than the font size;
7. GENERAL STRUCTURE OF THE PAGE
Ideally, a single grid should be used on the page. Thus, you can achieve a harmonious look of the whole site as a whole. Try to use the general rules and styles (which you came up with) throughout the site;
8. COLOR AND CONTRAST
The text should be well read, for this it should be contrasting. It is better to use the classic black and white solution, this combination has the highest possible contrast, therefore it is most convenient for reading. The remaining combinations should be tried with great care.
9. WHITE SPACE
White space is not a void, but an important design element. It is not necessary to sculpt elements too closely, always leave a little “air”. This way you can achieve a clean, light, pleasant design.
Firstly, thanks to Dima for the post. Everything is said briefly and in essence, in fact, the topic can be developed endlessly for each of the points. I think some of the answers to the questions can be found on his website Converlab. In addition, I wanted to add on my own that if you had already decided to do something “sort of” in terms of typography of the site, you would advise you to look at various collections on the Internet with original solutions before work. It is very inspiring and also contributes to the emergence of creative ideas.