What vertical rhythm is
Vertical rhythm is the principle that every line of text on a page should sit on a regularly spaced horizontal grid, like ruled notebook paper. When body text has a line-height of 24 pixels, every heading, list item, and paragraph margin should be a multiple of 24 pixels too. The result is a visual cadence where columns of text line up across a page, even when they contain different typographic sizes.
Print designers have done this for centuries. The web inherited the practice unevenly. Most modern sites have a rhythm that drifts: a heading might be set to 1.5em line-height, paragraphs might be 1.6, margins might be 0.75em, and nothing aligns. The Calculator here keeps the math honest by computing every value as a multiple of one base unit.
Why it still matters in 2026
On long-form content like documentation, articles, and product pages, vertical rhythm is the single biggest determinant of perceived quality. Reading is easier when the eye can predict where the next line will land. When the grid breaks, the content feels amateurish even when you cannot name why.
Vertical rhythm also makes responsive design easier. Pick the base unit at the smallest viewport, scale every typographic measurement against it, and the proportions hold up at every size. Pair it with a fluid type scale and you get a page that feels handcrafted at every breakpoint.
Common Use Cases
Documentation site authors use the Calculator to set up a tight rhythm before they write a line of CSS. Marketing landing-page designers use it to align a multi-column hero section where each column has different content lengths but identical baselines. Email template designers use it to keep table-based layouts visually consistent in clients that do not support modern CSS.
Teams migrating to a design-token system find the Calculator useful as a single source of truth for the spacing scale. Export the values, paste them into your token file, and never again debate whether the small gap should be 8 or 10 pixels.
How We Compare
Several rhythm tools online give you a single line-height value and call it done. The Calculator goes further by deriving headings, list spacing, blockquote margins, code-block padding, and small-text leading all from the same base. Every value is a clean multiple of the base unit so you can see at a glance that the grid holds.
Compared to typecast.com or modularscale.com, the Calculator focuses on rhythm rather than scale. The two are complementary: pick a scale ratio in the Typography Scale tool, then plug those sizes into this Calculator to assign each one a baseline-aligned line-height and margin.
Frequently Asked Questions
What is a baseline grid?
A baseline grid is an evenly spaced set of horizontal lines that every line of text sits on. The distance between adjacent lines is the base unit, often equal to the body text line-height. On a 4-pixel grid every measurement is a multiple of 4; on a 24-pixel grid every line of text starts exactly 24 pixels below the previous one.
Should I use pixels or rems for my baseline?
Rems are the modern best practice because they scale with the user font-size preference. A rhythm built in pixels stays fixed at 16-pixel base; a rhythm built in rems scales gracefully if a user has set 20-pixel base in their browser settings. The Calculator exports both formats so you can pick. Use rems for production CSS; pixels for design mockups.
What is the right base unit?
Most teams settle on a base unit between 4 and 8 pixels, with body line-height as a multiple of it. A 4-pixel base gives the most flexibility because every common margin (8, 12, 16, 20, 24, 32) is a whole multiple. An 8-pixel base is a popular default because it cleanly halves and quarters into 4, 2, and 1. Start with 4-pixel base and adjust if it feels too granular.
How do headings fit on a baseline grid?
Headings sit on the grid by adjusting their line-height to the smallest multiple of the base unit that is greater than the font-size. A 32-pixel headline on a 4-pixel grid gets line-height 36. A 48-pixel headline gets line-height 52. Combined with margin-top and margin-bottom that are also grid multiples, the headline aligns the body text underneath to the next grid line.
Does this work with fluid typography?
It can, with care. Fluid typography uses clamp() to scale font-size between two viewport widths, so the actual rendered size is a moving target. You can keep the rhythm visible by binding line-height to ch units or by computing it as a unitless multiplier that scales with the font-size. The Calculator outputs both options so you can pick the right one for your stack.
What about content I do not control, like user comments?
Apply the rhythm to a parent container with a typography style, then let user content inherit. CSS typography reset libraries like the Tailwind prose plugin or sanitize.css enforce rhythm at the container level, which means user-supplied HTML automatically picks it up. The Calculator output is compatible with both approaches.
Will breaking the rhythm always look bad?
No. Intentional rhythm breaks are how you create emphasis. A pull quote that floats off the grid draws the eye precisely because the rest of the page is so regular. The rule is: build the grid first, hold it for body content, and only break it on deliberate design moments. A page that breaks the grid by accident on every other element feels chaotic.
How do I check if my rhythm is actually working?
Two options. First, the Calculator includes a baseline overlay you can preview against any text. Second, browser extensions like Modular Grid Overlay or built-in DevTools rulers let you check live pages. If every line of text touches a grid line, the rhythm holds. If lines drift, find the offending margin or line-height and round it to a grid multiple.