What is a baseline grid?

A baseline grid is a series of evenly spaced horizontal lines that text sits on. Using a consistent unit for all vertical spacing (padding, margin, line height) ensures elements align naturally and the layout feels ordered.

What line height multiplier should I use?

For body text, 1.4–1.6 is standard. Tighter values (1.2–1.3) suit large headings; looser values (1.7–1.8) help small or dense paragraphs. The calculator shows whether your choice produces a whole-pixel baseline unit.

Why does the grid unit need to be a whole number?

Browsers render on a pixel grid. Fractional units cause sub-pixel rounding that makes text appear blurry or misaligned, especially at smaller sizes on lower-DPI screens.

How do I use the generated CSS variables?

Copy the :root block and paste it into your global stylesheet. Then use var(--baseline) as the unit for all margin, padding, and line-height values (e.g. margin-bottom: calc(var(--baseline) * 2)).

Does this work for print design too?

Yes. Switch the unit selector to points (pt) or millimeters (mm). The math is identical; only the unit label changes in the output.

Baseline Grid Calculator

Name: Baseline Grid Calculator
Availability: InStock
Author: Nham Vu

Enter your font size and line height to generate a baseline grid with vertical rhythm values for consistent typography.

Grid Settings

Base Font Size

Line Height Multiplier

Recommended: 1.4–1.6 for body text

Preview Grid Lines

Heading Scale

Grid Metrics

Baseline Unit

—

Line Height

—

Grid Aligned

—

Half Unit

—

Type Scale

Click Calculate Grid to see the type scale.

Grid Preview

Click Calculate Grid to preview.

CSS Variables

/* CSS will appear here after calculation */

Summary

Enter your font size and line height to generate a baseline grid with vertical rhythm values for consistent typography.

How it works

Enter your base font size in pixels (e.g. 16px for body text).
Set a line height multiplier — 1.5 is a comfortable default for body copy.
Optionally adjust the number of grid lines to preview.
The calculator derives the baseline unit and suggests heading sizes that align to the grid.
Copy the generated CSS variables and paste them into your stylesheet.

Use cases

Establishing vertical rhythm before starting a new web or print project.
Debugging inconsistent spacing in an existing design system.
Generating CSS custom properties for a design-token-based stylesheet.
Choosing harmonious heading scale values that align to a base grid.
Teaching students how baseline grids and vertical rhythm work.
Checking whether a chosen line height produces whole-pixel grid values.
Documenting type specifications for a style guide or handoff to developers.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu