Design Tip 1 – Use a baseline grid

What is a baseline grid?

A baseline grid is a series of invisible vertical units that can be used to create consistent vertical spacing with your typography and page elements.  It is an invisible way of giving order to disorder.

 

Why use a baseline grid

  • Base line grids take the guess work out of how to space things vertically.
  • It allows elements across columns to line up visually.  
  • It helps to unify scale.
  • It’s a quick way to consistently line things up across pages.
  • It gives a guidelines for multiple designers working on a project.
  • It makes it easer for developers to determine spacing.

It will give your work cohesion and consistency. It is this element that will make things feel justl right. That crispness that people can’t quite put their finger on.

 

How to use a baseline grid

I will use photoshop as reference but you can use any tool of your choice. You can use different heights based on project requirements. But 90% of the time I tend to opt for 12px as it’s divisible by 4 and 3. So I can use 24px line height for setting body text. 36px or 48px for titles etc. 

There are 2 ways that you can use to setup your grid. 

With a pattern. 

Step 1. Create a new document with a width of 1px and the height that you want your baseline grid to be. In my case it’s 12px. This canvas will be used to define our pattern. 

Step 2. On the very bottom pixel use the pencil tool or  a shape and fill it with your desired colour. 

Step 3. Select the whole canvas with the marquee tool. Go to Edit > Define Pattern. 

Step 4. Create a name that you can later identify easily. In this case 12px - Baseline, keeping that shit simple and obvious. Your future self will thank you for it. 

Step 5. Now when you have your new document, go to the paint bucket tool and select pattern. Select your recently defined pattern. 12px - Baseline. 

Step 6. Fill your canvas with your pattern. And you should get something similar to below.  

Step 7. Now use your baseline to set your type and visual elements. Here I’ve used Minion Pro set at 16px with a line height of 24px. 

Or alternatively you can create it using guides. 

Step 1. Go to View > New Guide Layout. 

Step 2. If you don’t see any guides it’s because the size of the number of rows is taller than your document size. Just scale down the number of rows and the guides will appear. In this case it was 63 x 12px. 

Step 3. Be sure to lock your guides so you don’t accidently select them. Now use your baseline to set your type and visual elements. Here I’ve used Minion Pro set at 16px with a line height of 24px. You can also turn your guides on and off by using CMD + ;

 

There are pros and cons to both approaches. The guides snap better but it is not always visible on certain layouts and doesn’t work well when moving your artboards around. (Unless someone knows a nice solution let me know)  So you can use one or the other or both at the same time and pair it with the common 12 column grid. I also posted a simple exercise a while back which you can also check here

Example:

Happy Gridding! 

Here are some further recommended reading materials too

Grid Systems in Graphic Design by Josef Müller-Brockmann

Vignelli Canon by Massimo Vignelli