Lately, I've been reading everything I can get my hands on about grids. A couple favorites are: Making and Breaking the Grid, The Designer and the Grid and just to set things off on the right design-minded foot, The Vignelli Canon. Every document I create sits on top of some type of grid-based structure. In web development, I use Twitter Bootstrap's 12-Grid System (12 columns and unlimited rows) to lay the foundation for the content. For print projects, depending on the nature of the project, I'll make my own grid. This brief tutorial attempts to walk through the process of setting up that structure. I won't get into the weeds about content hierarchy or typeface selection. I will however, take a more straight-forward approach to this specific part of the project setup.
Setting Up the Page
It's up to you to decide whether to take the font-size into consideration. For simplicity, I'll use a font-size of 10.5 pixels on an A4 (210mm x 297mm) page size - this is closest to 8 1/2 x 11. The default setting for most layout software is 120 percent of the type size and conventions finds that anything between 120% and 145% works. In the end it comes down to what you think looks good; but this is at least a starting point.
Some projects require control over vertical as well as the horizontal flow. In this case, a modular grid may be a good solution. Modular grids have vertical columns and horizontal flowlines the divide the columns into rows - similar to Twitter Bootstrap. Each one of the cells is called a module - hence the name. This modular grid will have four columns and eight rows, with a 3mm bleed around the edge of the entire document. Now let's open Illustrator and begin:
- Make sure your rulers are on (⌘ + R)
- Select the rectangle tool, make sure smart guides are on (⌘ + U)
- Find the center of the document, hold down the Option key and click once (you’ll see a crosshair appear and a dialog box which you'll fill with the width and height dimensions). In this case, the A4 measurements (210mm x 297mm)
- Next to each dimension, type - 24pt (this will put a 12 point gutter around the edge of the document)
- Click OK
- Change the color of the rectangle to #000 with a transparency of 20%
Click on Transform. The newly adjusted dimensions are: width (201.533 mm) and height (288.533 mm)
Making the Grid
Take the height of the rectangle (288.533 mm) and divide it by the leading - also known as line spacing. I've decided on a 14 point(4.94 mm) leading to give the type some breathing room. This gives us the number of lines of text that will fit on the page (58.41). However, we need to use a number that will divide evenly into 8. In this case, it's 56 (7 lines of text for each row). We will use one less, bringing the number of lines to 55.
Now, take the height of the rectangle (288.533 mm) and divide it by the 55 lines. This is the new leading, 5.246 mm - it's also going to be the width of the gutter (space between the columns).
- Select the rectangle
- Go to Object > Path > Split into Grid...
- Check the Preview box; but leave Add Guides unchecked for now
- Fill in the number of rows (8) and columns (4)
- Fill in the new gutter, 5.246 mm
- Click OK
Select all the boxes and group them together (⌘ + G) so that they are easily selected later on. Go back to Object > Path > Split into Grid... and check the Add Guides box. Now click OK.
- Create a new layer and name it Guides
- Select the guides and move them to that layer
- Using the Direct Selection (white arrow) tool, drag it over the top of the rectangle to select the vertical guides
- In the Transform panel, type the height of the page (297 mm). The guides will be shortened to fit the page.
- Make the lines into guides, View > Guides > Make Guides (⌘ + 5)
- Repeat the same for the horizontal lines, with a width of 210 mm.
- Lock the Guides layer
Making The Baseline
While the grid helps to set a structure for organizing the content on the page, the baseline helps set a vertical rhythm for the text to flow.
- Create a new layer and name it Baseline
- Create one line across the top grid. Give it a red stroke color and no fill.
- Go to Effects > Distort & Transform > Transform
- The Preview check box should be selected
- Now we want to duplicate the line we just created vertically with an offset using the leading measurement, 5.246 mm
- The number of copies we want is 55
- Click OK
- If you need to go back and adjust any of the numbers here, click the Window > Appearance tool and you'll see there is an fx next to Transform. Click it to modify.
Now you have a grid and baseline to lay out your print project.
