DzinerHub

DzinerHub

Baseline Grid

A typographic grid that aligns text baselines to create vertical rhythm.

Baseline Grid

A typographic grid that aligns text baselines to create vertical rhythm.

In Web & Mobile Design

What is a Baseline Grid?

A baseline grid aligns text baselines across components and columns to create consistent vertical rhythm.

When to use a Baseline Grid?

- Content-heavy layouts and reading experiences

- Design systems that demand typographic consistencyWhen not to enforce a Baseline Grid? - Highly expressive or experimental layouts prioritizing visual play over rhythmWhat is the anatomy of a Baseline Grid?

- Base unit derived from line-height

- Multiples for spacing scale

- Alignment of headings, body text, and UI controls