Frequently Asked Questions (FAQ) - developing an effective FAQ section
As you, of course, know, Frequently asked questions (FAQ) are frequently asked questions that are collected and highlighted on a separate page. Thanks to her, the user will be able…

Continue reading →

Tips for Using Images on Websites and Blogs
Of course, the image is the epicenter of any website, because a person is visual in nature. When creating a website or blog, we pay particular attention to content, design…

Continue reading →

Effective split-screen design methods
One of the most noticeable trends in website design for 2017 is the split of the screen into two parts. More and more web projects are using a similar layout…

Continue reading →

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.

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;

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.
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;

site typography
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;

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;

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;

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.

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.

Thousands of dollars of passive income for web designers
Skilled web designers who want to receive passive income are now in a rather favorable position. As more and more companies enter the Internet market, the work of web developers,…


How to make a color palette for a site and not only
In Design Mania, there have already been several publications with similar topics: in a note about color matching services for websites, in addition to inspiration resources, we examined a couple…


How to choose the best illustrations for your site
I somehow had publications about the best free photo banks and photo stocks in which the question was raised where to look for images for the site. Today I want…


Web Design Illustrations - Best Uses
If you carefully study any selection of website designs on a particular topic, one trend will be obvious to you - illustrations are now in fashion. They are so widespread…