<aside> ℹ️ 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.

</aside>

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.

It is a mistake to think that the baseline grid automatically creates a good vertical rhythm.

It is a mistake to think that the baseline grid automatically creates a good vertical rhythm.

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.

Contrast and other composition techniques are important for building a vertical rhythm.

Contrast and other composition techniques are important for building a vertical rhythm.

The baseline grid is useful mainly in mobile and desktop applications, where you can control the height of design elements and give them fixed values that do not change.

However, in responsive interfaces such as websites or screen size-dependent apps, the baseline grid has no meaning because elements such as controls, buttons, and images often cannot be set to the same height parameters. Therefore, there's no need to use the baseline grid in these cases.

The grid creates trouble if you try to fit any headings into a baseline multiple of 4 or 8px. If the heading has its independent line spacing, all is well.

The grid creates trouble if you try to fit any headings into a baseline multiple of 4 or 8px. If the heading has its independent line spacing, all is well.

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.

Three approaches to building a spacing scale.

Three approaches to building a spacing scale.

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.