Skip to main content
PUBLIC.INTERNET
⚡ Acceso Inmediato🔒 Privacidad Primero🆓 Siempre Gratis📱 Funciona en Todos Lados

Vertical Rhythm & Baseline Grid Calculator

Vertical rhythm is the practice of spacing every element on a page in multiples of a single baseline unit, the way ruled paper keeps handwriting even. Get it right and a layout feels composed and easy to scan; get it wrong and headings, paragraphs, and images drift out of alignment in ways readers feel even when they cannot name. This tool computes the baseline unit from two inputs you already control: your base font size and your line height (baseline = size times line height, so 16px at 1.5 gives a 24px baseline). From there it derives a spacing scale (half, one, one-and-a-half, two, and three baselines) and a block of CSS custom properties you can paste straight into a stylesheet. The live preview sets sample text to your numbers and draws the actual baseline grid behind it as faint horizontal lines, so you can watch the text sit on the grid and toggle the guides off to compare. Adjust the sliders and everything, including the grid spacing, updates instantly.

Baseline unit

24px

16px x 1.5

Spacing scale

    Live preview

    Rhythm you can see

    When every line of text and every gap lands on a shared baseline, a page feels calm and deliberate. The grid lines behind this text are spaced one baseline unit apart.

    Change the base size or line height on the left and watch the text snap to a new rhythm. Toggle the grid to compare with and without the guides.

    CSS custom properties

    How to Build a Baseline Grid
    1. Set your base size - Drag the Base font size slider to your body text size (16px is the common default).
    2. Choose a line height - Drag the Line height slider; 1.5 is a safe starting point for body copy and the baseline unit updates live.
    3. Read the baseline unit and scale - The large number is your rhythm unit; the spacing scale lists the multiples you will use for margins and padding.
    4. Check the overlay - Watch the sample text sit on the baseline grid, and untick Show baseline grid overlay to compare with and without the guides.
    5. Copy the CSS variables - Click Copy CSS and paste the custom properties, then use var(--baseline) and the spacing tokens for all vertical margins.
    Why This Tool?
     Most pages explaining vertical rhythm are tutorials with the math written out by hand. Doing that math every time you tweak a font size is tedious and error-prone, and it does not let you actually see whether your text lands on the grid. This tool closes that loop: it calculates the baseline, shows the grid, and hands you the CSS, so you can iterate by feel instead of arithmetic. The core idea traces back to print design, where text was set on a fixed leading and every column aligned to the same horizontal lines. 
     Driving spacing from CSS custom properties is what makes rhythm maintainable. When margins are written as calc(var(--baseline) * 2) instead of magic numbers, changing one variable re-tunes the whole page, and the values stay consistent across components. That is also why the tool sets line-height in pixels equal to the baseline rather than as a unitless ratio in the export: it guarantees every line of body text advances by exactly one rhythm unit. 
     Vertical rhythm pairs naturally with a sensible line length and a modular type scale. Together they form the backbone of readable long-form layouts, and unlike most polish work, they cost almost nothing to apply once the variables are in place.