The Baseline Grid Guide

In web design, we often obsess over horizontal alignment—making sure columns line up and margins are even. But Vertical Rhythm is the “secret sauce” that makes a layout feel professional, expensive, and easy to read.

A Baseline Grid is a series of invisible horizontal lines (like the lines in a notebook) that guide the placement of every text element, image, and button on your page.

Why Use a Baseline Grid?

• Readability: When text follows a consistent rhythm, the eye can scan content with less effort.
• Visual Harmony: It eliminates the “random” feeling of different font sizes and line heights clashing.
• Design Efficiency: It takes the guesswork out of spacing. Instead of wondering if a margin should be 15px or 20px, you simply use a multiple of your grid (e.g., 8px, 16px, 24px).

How the Calculator Works

This tool helps you establish two critical values for your CSS:

1. The Baseline Unit: This is the “heartbeat” of your typography. It is calculated by multiplying your Base Font Size (usually 16px) by your Line Height Ratio (usually 1.5).
   • Formula: $FontSize \times LineHeight = BaselineUnit$
2. The Sub-grid Step: Based on the popular 8pt Grid System, this is the smallest unit you use for minor padding and borders. Usually, this is set to 4px or 8px.

How to Apply the Results to Your CSS

Once you have used the calculator to find your units, apply them to your global stylesheet using CSS Variables.

1. Set Your Global Rhythm

Apply your baseline unit to the body text. This ensures that every paragraph occupies an exact “block” of vertical space.

CSS

body {
  font-size: 16px;
  line-height: 24px; /* Your Baseline Unit */
}

2. Spacing in Multiples

Every margin and padding on your site should now be a multiple of your Grid Step or Baseline Unit.

• Small spacing: padding: 8px; (1 step)
• Medium spacing: margin-bottom: 24px; (1 baseline unit)
• Large section gap: padding-block: 72px; (3 baseline units)

Pro-Tip: The “Line-Height-Crop”

When using a baseline grid, remember that different fonts have different internal leading. If your text looks slightly off-center, use the Vertical Rhythm Preview in the tool above to visually adjust your line-height until the letters sit perfectly on the purple “notebook lines.”