The main types of user interface buttons on sites and applications
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of…

Continue reading →

Mobile version of the site and responsive design: all the pros and cons
In the era of the mobile revolution, it is worth considering giving your customers the opportunity to work with the site using smartphones, tablets, etc. It is necessary to give…

Continue reading →

The main types of user interface buttons
Buttons are one of the most famous interactive user interface elements. They play a very important role in creating user interaction and creating a positive experience. Continuing a series of…

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.

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;

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

4. ACCENT
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
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.

Google+ style buttons, download 200 Google+ icons
The Google+ social network, even in beta testing, burst into the lives of advanced users, so do not be surprised at the interest that this social network causes, including web…

...

6 main stages of website development
I was recently told in the comments that some posts do not correspond to the format of the blog, which is positioned as a useful resource specifically for web designers.…

...

Redesign: several indicators that his time has come
Redesign. This one word can make any web designer and developer shudder. The imminent danger in the form of constant revisions and refinements of the project, as well as shareholders…

...

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,…

...