9 tips for website typography

Typography for a website is a rather important design element, which is somehow not very strongly expressed in Runet. This question is more 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 very modestly and little. Therefore, in runet, you can probably count on your fingers the number of projects with bright creative and non-standard typography, more than the standard dull “gray” design 🙁

Perhaps this is why Dmitry Naumov decided to share an interesting guest post on the topic. Dima, by the way, is the author of a very useful project. Converlab – “Design. Usability. Conversion.” So, let s get straight 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. Font design determines mood, conveys “character”, and generally has a strong influence on perception. Choose a font that matches the style and concept of your site. For example, for a “traditional” design, a traditional serif typeface like Times Roman would work; for a “modern” design, a sans-serif typeface like Arial or Helvetica might work;

2. Font size

The font size of the body of the text is especially important. The headline / subheadings can be grotesquely large and awkward, but the body copy needs to be comfortable, which is only possible with optimal sizes. This is usually 12-16 px;

We also advise you to read:

3. Set of styles

The font should not be monotonous, the gray mass is not pleasant to read. Develop a style system for headings and subheadings (H1, H2, H3, etc.), quotes, body copy, and the like. For this, use different font sizes, options for its style, perhaps for contrast, for this purpose, use another font (especially for headings or quotes);

4. Emphasis

Important places in the text must be highlighted – in bold or italics. The main thing is not to overdo it. The emphasis is on that and the emphasis then on what should be used dosed;

5. Column width

In traditional typography, a lot of attention is paid to column width, for this reason, 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 string is also not good. Optimal line length is in the range of 70-140 characters;

6. Leading

Leading – distance between lines. If it is small, it will negatively affect readability. Too big Leading doesn t bode well either. In general, you will most likely want leading 2-4 points larger than the font size;

7. General page structure

Ideally, the page should use a single grid. Thus, you can achieve a harmonious look of the entire site as a whole. Try to use general rules and styles (that you come up with) throughout the site;

8. Color and contrast

The text must be readable, for this it must be contrasting. It is better to use a classic black and white solution, this combination has the greatest possible contrast, therefore it is most convenient for reading. The rest of the combinations should be tried with great care.

9. White space

White space is not a void, but an important design element. Do not sculpt the elements too closely, always leave a little “air”. In this way, a clean, lightweight, pleasant design can be achieved.

——

First, thanks to Dima for the post. Everything is said briefly and to the point, 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 would like to add on my own that if you have already decided to do something “such” in terms of the typography of the site, then I would advise you to look through various collections on the Internet with original solutions before starting work. It is very inspiring and also fosters creative ideas.