An invisible horizontal structure that aligns typographic baselines and other vertical dimensions to a consistent unit, typically 4px or 8px. A baseline grid creates rhythmic vertical spacing across a layout, ensuring that text flows harmoniously with images and components even when multiple type sizes are combined on the same screen.
Common contexts
- Setting all vertical spacing tokens in a design system to multiples of 8px to enforce consistent rhythm
- Aligning icon heights to baseline increments so inline text and icons sit on the same visual line
- Auditing a dense data table layout to ensure row heights snap to grid without crowding content
Use when
Establish a baseline grid when starting a design system or defining spacing tokens — it's much easier to build rhythm in from the beginning than to retrofit it. A 4px base unit gives you granular control for small components while still scaling up predictably to layout-level spacings.
Avoid when
A baseline grid adds overhead without payoff for one-off marketing pages or illustrations where layout is driven by art direction rather than systemic consistency. Forcing editorial or campaign designs onto a grid that wasn't designed for them can destroy the intentional visual tension that makes those designs work.
The baseline grid doesn't make your design feel mathematical — it makes it feel calm. Most users will never see it, but they'll immediately notice when it's absent.
Real-world examples
- Google's Material Design specifies an 8dp baseline grid that governs spacing, component sizing, and typographic alignment across Android and web products.
- IBM's Carbon Design System uses a 2px baseline grid for typography and an 8px grid for layout components to ensure vertical rhythm consistency.
- Atlassian's design system mandates a 4px baseline unit, ensuring all spacing values across Jira and Confluence are multiples of four for visual consistency.