Web Interface Handbook / Typography

Vertical Rhythm

01 8 pixels or baseline grid is of little importance

Don't search for uniform shapes and intervals that can be lined up automatically in all cases. On the contrary, look for differences, contrast, and make an irregular tempo. This will help you make an unusual and attractive design.

Equal spacing between elements or arranging all blocks of text based on the baseline or 8px grid does not make the text visually more attractive or easier to read. Just as in music, so in typography, pauses and changes in rhythm are more important than something boring and uniform.

A proper vertical rhythm is achieved by the contrast and variety of elements, the repetitive spacing, and by the harmonious relationship of those spacing.

02 Rhythm based on spacing scale

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 ways to building a spacing scale.

Any rhythm is a system of values that has relationships, connections, and allows you to create predictable and logical padding and margin.

No matter which way of building spacing you choose, it is important to stick to it throughout the design and look for harmonious ratios of values.

03 Perfect vetical rhythm

The distance values are not the same in a perfect vertical rhythm of long texts or interfaces. They create a varied rhythm and thus make the look of the design or text pleasing.

Perfect vertical rhythm built on line spacing multiples.

Generally, a good vertical rhythm works with the distances between different design elements depending on their contrast, purpose, and importance on the page/screen.