Vertical Rhythm

Vertical rhythm is the backbone of any typography system that does not fall apart the moment real content gets added. It is the practice of aligning all vertical elements to a repeating grid usually based on your body text line height. Select a base like 24 pixels then set your line heights to 24 pixels or 48 pixels. Set your paragraph margins to 24 pixels. Make component padding like the space inside a card 24 or 48 pixels. The goal is that if you drew horizontal lines every 24 pixels across your layout every piece of text would sit neatly on those lines. This is what the parent article refers to when it says paragraph spacing should use a consistent multiplier of your base unit. It removes the guesswork from your life. It makes your designs more readable because the eye can predict where the next line or paragraph will appear. It works hand in hand with your type scale. A Major Third scale from the article pairs beautifully with a matching rhythm because the size jumps feel intentional when the spacing supports them. Without vertical rhythm even the best font pairings and weight rules from the article look like they were assembled by different people on different days. This approach also helps maintain order when you use fluid typography with CSS clamp as the article recommends.

Vertical rhythm is not a nice to have polish step you apply at the end of a project like some kind of decorative afterthought. It is not simply increasing or decreasing line height until the text stops looking cramped on your laptop screen. It is not using the browser default spacing and assuming it will work across breakpoints or different content lengths. It is not something that only print designers need to worry about in 2024. The article lists the spacing guess as one of the common type system failures and that is vertical rhythm ignored. You see the symptoms when headings have massive air below them or when paragraphs butt up against images with no breathing room or when switching from the marketing site to the app feels like changing brands overnight. Many designers blame the fonts or the brand colors first. The real culprit is the lack of a shared vertical language. If you have ever opened a Figma file from six months ago and wondered why the spacing looks like a ransom note you have seen a vertical rhythm problem. Fixing it requires going back to the foundation and setting rules that everyone from designers to engineers follows without exception. When type feels off but you cannot explain why check the spacing before changing the font. That takeaway from the article is pure vertical rhythm truth.

The concrete example that best illustrates this is the 2021 overhaul of the Intercom help center. They adopted a strict 28 pixel vertical rhythm to match their updated type scale based on a Minor Third ratio. Body text at 17 pixels with exactly 28 pixel line height. Article titles at 40 pixels with 56 pixel line height which is two multiples. The space between sections exactly 56 pixels. Sidebar navigation items spaced at 28 pixel increments. The result was a help center that feels calm and organized even when articles run to 2000 words with embedded screenshots code blocks and related links. Users find answers faster because the predictable spacing reduces visual noise. You can test it yourself by visiting their docs today and using the browser dev tools to add a linear gradient background that repeats every 28 pixels vertically. The text sits perfectly on the pattern with zero drift. A second example comes from the Material Design system at Google which has used an 8 pixel grid for vertical rhythm since its launch in 2014. All components from cards to lists to app bars follow the multiples without exception. This is why Android interfaces feel more consistent than many custom built ones that let designers eyeball their spaces. A third case is the Stripe dashboard refresh in 2022. They used 24 pixels as their unit and everything from pricing tables to footer links locks in perfectly. These examples show that vertical rhythm is not theory. It is a practical tool that scales from small teams to the largest tech companies and makes the difference between forgettable interfaces and ones users trust instantly.

Turn to vertical rhythm any time you are creating a lasting digital product that will see frequent updates and multiple hands on deck. It is essential for the kind of typography system the parent article advocates because it is the part that makes all the other rules real in the browser instead of staying as pretty Figma artifacts. Use it in dense data interfaces like the ones at Linear or Vercel where information density is high and every pixel of space matters for scannability. It prevents the orphan weight and desktop only scale problems mentioned in the article by providing a framework that adapts cleanly. The benefits compound when your design tokens include rhythm values that engineers can pull from a single source of truth instead of reinventing them every sprint. Avoid full vertical rhythm implementation when you are doing brand campaigns that prioritize raw emotion or disruption over order or when designing highly experimental portfolios where the goal is to break conventions on purpose. A fashion brand like Supreme in their lookbooks breaks rhythm intentionally to create energy and attitude. Copy that approach only if you have a damn good reason and even then start with the grid so your breaks look like choices instead of mistakes. If your project has fewer than 10 text styles or will not live past one campaign you can relax the rules but never abandon them completely or risk the kind of inconsistency that makes users bounce before they read a single sentence.

Get vertical rhythm right and the rest of your typography problems start solving themselves.