Designing with a 4px/8px baseline grid

Image credit:

Alexander von Schulz

Unlock the cheat code

A few years ago I was researching layouts and grid structures when I came across a great article by Pierre Marly from Teehan+Lax: Designing Faster with a Baseline Grid.

I’ll admit that when I first read it I’d never heard the term “baseline grid” before — but that was about to change. Pierre’s thinking had a lasting effect on my approach to design. Years later, the principles I picked up (and a few others along the way) are still at the core of my design process. Here’s my approach to baseline grids.

Traditional typographic scale

Typography is the foundation of great design. Where possible I like to use the traditional typographic scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 30, 36, 48, 60, 72, 80, 96) as mentioned in Robert Bringhurst’s book The Elements of Typographic Style. It’s a great way to establish a clear hierarchy and vertical rhythm in your work.

Note: I’ve added 30px as it’s a huge jump between 24px and 36px 🙂

Set type to use a 4px baseline grid

A 4px baseline grid provides the consistency and flexibility to design for both web and mobile without having to rethink about different measurements.