Vertical rhythm in design?

Question

Design

Guys, help! I re-read a bunch of information on the Internet, in general, there is an understanding of how the vertical rhythm works, but when I go to highly harmonious sites like Behance / Awards, I study the sites and do not see the complete observance of the Vertical rhythm, but the harmony does not become less. How do designers use vertical rhythm right now? In relation to all elements or only to certain ones? and I will be glad to any info on the account of the application of Vert. rhythm in web design.
How to properly build harmony vertically in the layout?

Answer 1

How to properly build harmony vertically in the layout?

Vertical rhythm is the same grid. Only if the horizontal grid is adjusted by the layout columns (8/12/16/24) and at any screen width any two columns (for example, in the header and in the body of the post) have the same width, then the vertical rhythm is regulated by vertical indents, font size and leading. We dance from the main font size. Margins and paddings are made multiples, leading and sizes of minor elements are also multiples. the 8-pixel grid is the most convenient. Then the sizes of fonts, indents and leading will be 2/4/8/12/16/24. Why then is the grid called 8-pixel? Because 6/10/14/20 multiples of four pixels fall out of the size set. If we count in ems, then the indents and leading will always be 0.25/0.5/1/1.25/1.5/2, etc.
You can deviate from the rules somewhere and make the font size of the element, for example, 13 or 17. But in order to deviate from the rules, they (the rules) must be.

Answer 2

and I don’t see full observance of vert.rhythm, but the harmony does not become less from this.

Because in fact it is there.

Answer 3

Here, sbildil for an example.
Grid: 12px

Answer 4

I was also confused about this topic some time ago. Accurate observance of the vertical rhythm is important for printed materials, where the text of the article is divided into several columns. On the web, this is an unnecessary limitation and complication (because CSS does not work properly with baselines ), just select a module (for example, 4, 5 or 6 pixels) and align to it.

Answer 5

How to properly build harmony vertically in the layout?

Do you remember the lined notebooks from school? The principle is exactly the same.

Answer 6

the topic is covered in this article https://onlinebd.ru/blog/ui-dizain-chast-pervaya-r... . explained everything perfectly. You can go beyond the usual rhythm and play with the perception of the buyer) by the way, I use and make miscalculations according to the golden ratio, many do not notice, but the perception is much better