Video

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

by

on

View all posts

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

make-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

text-align

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.

Want to pick it apart? Download the example file.
more-vdieos-animation
Author

Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.