Dave's Grid Tutorial

Overlapping Grid Systems:
Imagery and Type Registers

The following tutorial shows the use of a reoccuring number pattern I discovered. This tutorial deals mainly with the vertical rhythm of type within the type block, not with establishing a page size, page margins, type sizes or rules governing image placement.

A powerful method in grid systems is to overlap two grids, it gives a larger spectrum of image sizes and positioning to choose from. A good combination is a 3 x 3 (9 cell) grid and a 4 x 4 (16 cell) grid.

Getting the type register to line up with both grids can be hard but I have found a reoccuring pattern that might save you some time.

One of the lowest possible is:

7 lines x 3 cells + 2 empty lines = 23 lines of type
5 lines x 4 cells + 3 empty lines = 23 lines of type

Moving up the scale, none of these work:

8 x 3 + 2 = 26
9 x 3 + 2 = 29
10 x 3 + 2 = 32

Then you get to here:

11 x 3 + 2 = 35
8 x 4 + 3 = 35

Notice the gap of 3.

12 x 3 + 2 = 38
13 x 3 + 2 = 41
14 x 3 + 2 = 44

15 x 3 + 2 = 47
11 x 4 + 3 = 47

Another gap of 3, the next magic number is:

19 x 3 + 2 = 59
14 x 4 + 3 = 59

Then

23 x 3 + 2 = 71
17 x 4 + 3 = 71

Basically the series is 23, 35, 47, 59, 71 and so fourth.

So assuming you want a 3x3 and a 4x4, we know how many lines of type to set vertically. 59 is a good measure but it depends on your type size and page. This is how I set it up:

1. Choose a type size and number of lines
2. Assuming your margins are all in, set the type

3. Cmd + B for type options - Set the type area to align top to cap height

4. Round up or down the leading so that the last baseline is bang on the lower margin.

We now need to measure the height of an empty line.

5. Duplicate your text box, erase the content and rewrite into it three lines of type all with an uppercase H
6. Outline your type, and with the white arrow, select the top H drag a guide to its baseline.

7. Do the same again but drag to the cap height of the H

8. Create a box between the two guides

9. Measure the height of the box in the transform panel, this is our gutter.

Go to create guides (Layout > Create Guides)

10. Insert the values for the 9 cell grid, 3 rows and 3 columns (6 if you want a further subdivision) with the height of your box as the gutter, make sure the radio button is put on margins, not page.
11. Do the same again but with 4 rows and 4 columns (do not subdivide into 8, it's too much)

The guides you have now created should align perfectly to the type register. We will sure this up with a baseline grid.

12. Go back to your 3 H's and measure the distance from the baseline of the first H, to the top of the page. Copy this number.

13. Cmd + k for document options, go to Grids.
14. Whatever the height of your box was, paste it into 'Start:'
15. Insert your leading into the 'Increment Every:'

Our baseline grid is in now, to toggle on and off is cmd+ctrl '

16. Fill in the text box with some Lorem ipsum.

Concerning the use of the grid, the guides you have created is for type but mainly image. All images should now align to all type, any other type boxes you make should have the 'click to baseline' option selected, or at least 'Align only first line to grid' (like I have with the caption text which is 2/3 of my main lead, so every fourth line lines up.

Headings and subheads can also line up to the baseline, for my personal style I usually do, and I use sizings relative to the baseline. This system should also allow you to move these headings freely.

If you find the amount of guides too much, you can control what colour they and at what zoom levels they appear. To edit, select the guide you want, and go Layout > Ruler guides and the options are in there.

How you use this is now is completely up to you, but it is very versatile.

Return to Dave the Designer

See other tutorials