Design Snack #7: Baseline grids in web / UI design

In this Design Snack, I’ll give you an overview of what baseline grids are, how to use them, and why they’re so good at tightening up your designs.

What is a baseline grid?

A baseline grid is an underlying structure that helps guide the vertical spacing of your design. It’s an excellent typographic tool, but also comes in handy when laying out other elements on the page.
Just like using columns as guides in your design, the baseline grid is a way to help you make decisions and build consistency into your layout.

Setting up your grid

In Photoshop, go to View > New Guide Layout… to create your grid. Select Rows, and set your Height to a small number, like 6 or 8. Using smaller units gives you more guides on the page, which help you understand if and when things are aligning to your grid.
Increase the Number of rows up until they fill the page, then click OK. After that, you’ll want to lock your guides to avoid dragging them around on accident, so go to View > Lock Guides.

Aligning type

Let’s say for example that your grid height is set to 8 pixels. In that case you could set the leading of your type to any multiple of 4 (or 2, for that matter), and it will align perfectly to the grid.

The benefit of rows

The nice thing about having rows as a guides, is that they give you an easy way to tell if your spacing is right. Just turn on your guides and you can quickly check if your eyes are playing tricks on you, or if something on the page really is missing an extra row of space.

Of course, these rows translate to pixels, so it’s easy to come up with mental models and standards based off your grid once you’re used to working with it.

Final thoughts

Screen sizes, expectations, and interactions are constantly evolving, but there are two things that remain constant: Text on screens and scrolling. Baseline grids help make both of these things more aesthetically pleasing, and might get you thinking a little harder about the value of vertical rhythm.