Vertical rhythm is typography built with good contrast, hierarchy, and a balance of spacing between elements. An excellent vertical rhythm creates a sense of reliability, integrity, and design quality.
A good vertical rhythm sometimes means the interface is based on a baseline grid when each line or element is bound to the height of the line spacing of the text.
The baseline grid does not automatically give harmony or create balance by default. It is a grid that only helps to make a design with a unified height dimension system. A proper vertical rhythm is achieved by the contrast and variety of elements, the repetitive spacing, and by the harmonious relationship of those spacing.
Moreover, the baseline grid has limited use and mainly in mobile and desktop applications, where you can precisely control the height of any design elements and give them fixed values that do not change. In responsive interfaces, such as websites or screen size-dependent apps, the baseline grid has no meaning because many elements such as controls, buttons, and images most often can't be set to the same height parameters. And there is no need for that.
The best strategy for building a vertical rhythm is the spacing scale system based on a chosen unit and its multiples. This allows not only to create harmonious and predictable distances between text elements but also to give the entire design harmony, balance and integrity.
There are three most popular approaches to creating a spacing scale. Each has its own characteristics and may work better in different cases.
Based on the unit. You choose a specific number, such as 4px or 5px, and build a scale of multiples of that unit. This scale is convenient for any interface because it doesn't depend on font sizes and line spacing. Using this scale, you can create harmonious distances in texts and modules like cards.
Based on line spacing. This scale is a multiple of the line spacing of body text. It is an ideal choice for building a harmonious vertical rhythm for articles, news, long reads, and content-oriented projects. Since the scale is built on line spacing, it automatically gives balance and rhythm. The line spacing provides a rhythm, and values from the scale repeat this value, which means the harmony will be as good as possible.
Based on the body font size. The most controversial scale is highly questionable in practice. The height of body text is not really equal to its value in pixels and therefore has nothing to do with reality. Many modules will likely apply a non-body text size, so the scale values will have nothing to do with their text size.
Vertical rhythm is less important in such interface modules as cards and other small forms. Contrast, grouping, and compositional techniques are more likely to work here. It's worth paying more attention to the vertical rhythm for larger texts.
In fact, if you are making an interface that combines long texts and components with short captions and texts, you may need to use two different spacing scales. The body text size could be 21px on long reads, and the interface has 15px. These are different values to fit into a single spacing scale that will keep them balanced and systematic.
Using two spacing scales, you can create a good vertical rhythm for long texts (like documentation) and good spacing for small modules (like cards). The typography and design in both cases will be independent, and their spacing and size scales will not conflict.