Using textures in web design
What is the simplest, correct, and sometimes the only possible way to create an illusion of the relief of a particular element (object) in web design (as well as in…

Continue reading →

Ready design: good or bad?
Three years ago, when the logo / website design was created only on order, the ordinary brand manager could not have thought that soon IncSping (now Brandstack), Inkd, 99designs, StockLogos…

Continue reading →

Current trends and trends in logo design
The current trends in logo design 2017 did not become any special revelation. Similar to the main trends in website design, they are more a continuation and development of what…

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.

Where and how does a designer make money on the Internet
At present, it is not so easy to find a suitable and well-paid job, even for a knowledgeable, versed person. The crisis and all other nonsense oppresses, some unemployment in…

...

How to make favicon with your own hands?
Favicon A site without a favicon, like a ship without a flag. Favicon is an integral part of a site’s brand, its image and identification. By the way, look at…

...

Jacob Nielsen
I decided to dilute the publications with all kinds of pictures and materials for downloading a very interesting article about a famous person in narrow (and not so) circles. I…

...

How microstock originated, features of photobanks and microstock
Microstock (microstock) - the budget segment of stock photography, offering high-quality images for a penny, is rapidly gaining momentum. What is not surprising: high-quality photography has never been so cheap…

...