Vertical Rhythm in Typography

Rhythm in text is what makes it comfortable to read, helps maintain focus, and creates a sense of cohesion. All of this works together to build balance and harmony, making the content pleasant to absorb. It’s the kind of text people want to keep reading.

Creating a well-balanced vertical rhythm often proves to be a challenging task for designers. This is because there are rarely clear and simple rules on where to start, what to rely on, and how to create a uniform and consistent rhythm system. Most advice boils down to vague 'visual assessment' or intuitive actions.

As a result, the outcome is often disappointing: paragraphs are not connected to headings, lists blend into the surrounding text, and sections turn into one indistinguishable block. Instead of structure, the content creates visual noise.

Line Spacing

Line spacing is a small detail that plays a big role in shaping the overall rhythm of your text. If lines are too tight, the text feels heavy and dense. Conversely, if the spacing is too large, the text starts to fall apart—both between the lines and between paragraphs.

A good line height for body text is typically 1.6 or higher. This gives the text enough breathing room and makes it more pleasant to read. The ideal value often depends on the typeface you’re using. Fonts with a lower x-height can get away with a slightly smaller line height.

Start with 1.5 as a baseline and increase gradually until the rhythm feels right. In most cases, 1.6 works well across the board.

For headings, line height should be reduced. Use a consistent value like 1.2 for all headings to give them a strong, grounded appearance, regardless of their size. If you prefer, you can go slightly higher—1.3 also works nicely.

Just like with body text, it all depends on the font. Sometimes a slightly lower or higher value works better. But 1.2 is often a reliable sweet spot: lower than that and multi-line headings can feel cramped; higher than that and they may start to feel loose or fragmented.

Spacing Between Paragraphs

Finding the right spacing between paragraphs is the foundation of building vertical rhythm.

To calculate this spacing, you need to know the line spacing (line height) of your text. Then, simply divide that value by 1.5 — the result gives you an ideal paragraph spacing.

For example, if your line spacing is 24px, dividing by 1.5 gives you 16px. This is an optimal space between paragraphs that ensures visual balance.

If the spacing is too large, paragraphs start to “fall apart” visually and lose their connection. If it’s too small, the text becomes dense and hard to read.

Often, line spacing isn’t a neat round number. For example, if your font size is 16px and the line height is 1.6, the actual spacing might be 25.6px. Dividing that by 1.5 gives you 17.066. You can round this to 17px, or use a convenient multiple like 16px if your system favors 4px-based spacing. The key is to stay close to the calculated value.

This gives us the first core value for establishing consistent vertical rhythm.

Spacing Between Other Content Elements

The same value you calculated for paragraph spacing can also be used for spacing between other elements — such as tables, lists, images, and so on. This creates a sense that everything in the text is breathing in the same rhythm.

Non-text elements don’t require special or unique spacing. Just apply the same spacing consistently — between a paragraph and a list, a paragraph and a table, or any other combination.

1. This approach creates a unified composition throughout the text.
2. It simplifies both the layout process and the visual logic, ensuring consistency and structural clarity.

Spacing After Headings

This part is simple: the space after a heading and before the following text should be the same as the spacing between paragraphs. This visually aligns the text and removes unnecessary rhythm disruptions.

The spacing after a heading should not be smaller or larger than the paragraph spacing. The exact same value you’ve already defined for other elements is ideal. It keeps the heading tightly connected to its content and maintains a sense of visual continuity.

Always follow a heading with a paragraph of text — not a list, image, or table. A paragraph provides a smooth introduction to any media or structural element that may come next, creating a stronger and more natural connection.

Spacing Before Headings

To make content easier to navigate, headings (except for the main title, h1) should have noticeably more space above them. This helps the reader clearly recognize the beginning of a new section.

A good rule of thumb is to make the spacing before a heading twice as large as the spacing between paragraphs. For example, if the paragraph spacing is 20px, the space before the heading should be 40px or more. This creates a strong visual separation.

Just multiply your paragraph spacing by two to get the right value. If you want, you can go up to three times, but be careful not to let sections visually “fall apart” from each other. In such cases, you might also need to slightly increase the size of the heading to maintain balance.

The two-times rule works in most cases and is easy to apply right away. This gives you the second key value in building a consistent vertical rhythm.

Heading Contrast

Contrast can be achieved by adjusting the size, weight, or color of your headings.

Headings don’t just divide the text — they also create visual anchors that make the rhythm more noticeable and structured. That’s why they should stand out clearly in relation to the body text. The easiest way to achieve this is by creating a consistent size scale — multiplying each heading by a specific ratio. For example, a scale step of 1.333 creates strong contrast, 1.25 is slightly softer, and 1.15 results in smoother size transitions.

Multiply your base font size by this step to build a heading scale with consistent contrast. This introduces rhythmical accents without breaking the overall balance — as long as the scale is systematic.

As mentioned earlier, the more space you give above a heading, the larger or bolder it should be to hold its place visually. Conversely, if the spacing before a heading is smaller, consider reducing its size to keep the rhythm intact.

Color can also be used to distinguish lower-level headings like h4–h6. They may be the same size as body text, but a different color can create enough contrast. This adds variation without disrupting the rhythm — although it’s important to note that in some cases this can enhance clarity, and in others, it may introduce visual noise.

A systemized heading scale adds accents to the rhythm and keeps the contrast with the body text both consistent and balanced.

What Matters on Mobile

Text behaves differently on mobile screens. With limited vertical space, overly large spacings can interfere with readability.

This is especially noticeable above headings: if you keep the same spacing as on desktop, the text may feel disconnected. Large gaps can leave empty space at the bottom of a screen, causing the next heading to fall out of view due to scrolling.

That’s why it’s a good idea to reduce the top spacing before headings on mobile. This keeps the layout tighter and the content more cohesive and continuous.

At the same time, the spacing between paragraphs, tables, and other elements can usually remain the same as on desktop — it doesn’t interfere with readability and still provides good structure. This is especially true if your layout is based on relative units, since font sizes (and thus spacing) typically scale down on smaller screens. If not, consider manually reducing vertical spacing to match the adjusted line height for mobile text.

Summary

With a well-structured rhythm, the reader can navigate the text with ease. Sections feel clearly separated, and the eye moves smoothly from one element to the next at a consistent pace.

Apply these principles, and vertical rhythm will no longer be a mystery. You’ll be able to achieve a predictable, harmonious result — every single time.