01Spacing above the heading

An increased distance above the heading helps to better structure the text and separate parts of the text from each other. A large space from a paragraph or other content to the heading creates a pause and makes the text easier to read. It also creates an interesting rhythm and adds variety to long texts.

The heading has the same spacing at the bottom and top.
The heading has a larger spacing at the top.

02Smaller spacing for smaller headings

For small headings, it's best to make a smaller spacing at the bottom. This will make it closer to the following text. This way the heading won't be visually detached from the text and will get a good connection to it.

The small heading is too far from the text.
The small heading is close to the text that follows.

03Larger spacing for larger headings

It is good when the headings have a larger space at the bottom. This creates an ease of reading the text and a good balance. If the distance is too small, the heading presses the text with its contrast.

The big heading is too close to the text.
The big heading and text have a good balance of spacing.

04Spacing between paragraphs

Eligible spacing between paragraphs is 0.5..1 of line spacing. So, if line spacing is 24px, good spacing between paragraphs would be 12..24px. This helps to separate the paragraphs from each other and make the text easier to read.

Spacing between paragraphs is too small.
Eligible spacing between paragraphs.

05Spacing between paragraphs and lists

It is not a good idea to decrease the spacing before the list. At first glance, it may seem like a nice trick to improve the connection between the list and the previous text. But such a step rather breaks the vertical rhythm, introduces unnecessary pauses, and worsens the readability of the text.

Unequal spacing before and after the list breaks the rhythm.
The list at the top and bottom has the same spacing as between paragraphs.

06Spacing between text and image or table

It's a good idea to increase the spacing after an image or table to the following content. This will help to create text dynamics by pausing between these elements and their different kinds of data.

Spacing after the image is the same as between the paragraphs.
Increased spacing after the image.

07Spacing between text and quote or line

It is a good way to add extra emphasis to the text and the quote or horizontal line by adding spacing at the bottom and top. This creates an interesting visual rhythm, allowing the reader to pause before and after these elements.

Quote and line have the same spacing as between paragraphs.
Quote and line have an increased spacing at the top and bottom.

08The vertical rhythm based on the 8px or baseline grid is of little importance

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 good vertical rhythm is achieved by contrasting headings and texts, by different distances between headings, text and other content.

A baseline or 8px grid does not automatically give a good vertical rhythm.
Working with distance and contrast creates a unique and interesting vertical rhythm.