<?xml version="1.0" encoding="utf-8"?>

The baseline grid

The baseline grid

Baseline grids are horizontal lines (baselines) evenly spaced across your design that you can use for aligning content and typography horizontally. Designers also use baseline grids to ensure adequate vertical spacing between elements. Material Design guidelines use the baseline grid to determine type size and line-height parings, as well as margins and padding.[1]

While baseline grids may be a good solution for static websites, they aren't always helpful with dynamic user interfaces where users constantly add new media or content. The best approach here is to concentrate on keeping a clear, consistent vertical rhythm (line spacing and spacing between text boxes) on the page.

Improve your UX & Product skills with interactive courses that actually work