The Complex Grid

13/11/2009 – I’ve made a 2010 Calendar using the Complex Grid and I’ve explained it step by step. You can check that article here. I hope you like it

Karl Gerstner designed this grid for his work on the CAPITAL magazine. This is actually a six-column grid with a four-column grid superimposed. Karl suggests that this grid requires considerable study, and a designer would have to spend a great deal of time working with it before he could make free use of it in a creative sense.
In Gerstner’s grid, he accomplished a system that allowed for 6, 4, 3 and 2 columns with an added option of the unusual 5 column layout. In order to achieve this the number of division in one layout there must be 59 lines, which I find too restraining. In that sense I’ve left the five columns outside the construction of the grid that I’m going to explain.

I believe that the effort that goes into making such a grid is really worth it. I hope that you will share this opinion by the end of this article.

So, what we want to achieve is a layout that is divided in 2, 3, 4 and 6 columns and has the same horizontal divisions. You can either make these divisions for the page of your layout or for the type area. The gutter of the different columns is going to be exactly the same as the leading. The document grid is also going to fit in every division of the layout.

In the real world, often you can’t choose the size of the page your document is going to use, so I’ll show you the entire math that you must do to build a Complex Grid on a page that is given to you. For this example let’s choose an A4 page size.

1. Defining the leading
The first thing I usually do is to find a basic rough of what I want the margins and type area to look like. Mind you that until we get to the finished grid a lot of fine-tuning will have to be made.
For this layout, I wanted all the margins, except for the top one, to be equal. I’ve set them all to 12 mm and the top one to 18 mm. I’ve chosen to set the type at 8,75pt and the leading at 10,5pt.

As you can see, the lines of text don’t fit the type area exactly – don’t worry about this for now, we’ll manage to get every thing right in the end.
Having found a rough layout, the most important thing to do is to count the number of lines that ‘fit’ in the type area. In this example it’s 72 lines.

One of the first maths you should do is finding the number of lines that allow you to make the divisions you want. By setting the gutter value equal to the leading, the horizontal divisions must be blank lines. This brings us the first problem, we want to find a number of lines that allows us to use this basic formula:

{X – (Y-1)}/Y= Z

In which
X=number of lines
Y=number of division
Z=any integer number

Ok, it looks complicated but it is really simple when you start using it. In our example we have 72 lines so, for the 2 divisions, the formula would be:

{72-(2-1)}/2

And this equals 35.5. It doesn’t work.

Finding the number of lines that allows making a Complex Grid can be a pain, so I’ll just share some numbers that work. If you need another number you’ll have to do the math and use a try and error approach (a useful tip, the number of lines must always be odd).

Number of lines that work: 35, 47, 59 (this allows to divide in 5 columns also), 71, and 83

The number of lines closer to our example is 71 lines.
By this time, and because we want to set the leading, I start to think about the leading in terms of mm instead of pt. Since we also want to have the document grid fitted in our layout, we must find a value for each division that works in the whole page, but also in the leading. Again, this is a matter of try and error, but in my experience there are some numbers that work well:

4mm (11.339 pt) leading with document grid division (DGD) set to 1mm – Every line will have 4 DGD of height

3,75mm (10.63 pt) leading with DGD set to 0.75mm – Every line will have 5 DGD of height

3,6mm (10.2 pt) leading with DGD set to 1.2mm – Every line will have 3 DGD of height

3,3mm (9.354 pt) leading with DGD set to 1.1mm – Every line will have 3 DGD of height

Also take into account that the width of your page must divide by the DGD. For example, a DGD of 1,1mm for an A4 page is: 210/1.1=190.909090909 It doesn’t work!!!

Moving back to our example, if we set our leading to 3.75mm and have the 71 lines, our DGD would be 0.75mm (210/0,75=280 It works!!!!).

2. Setting the margins

Setting the top and bottom margins is easy, you’ll just have to adjust either one, or both, to work with your ‘new’ leading. In our example we’ve keep the bottom margin at 12mm and raise the top one to 18.75mm. We’ve also set the baseline grid to start at 0 and increase by 3.75mm. The text is now set to lock to the baseline grid and every thing is starting to fell into place.

As for the outside and inside margins, that’s where the real work begins. Most people (me included) are used to work with 12 columns layouts, and that’s how we are going to work to redefine the side margins.
As you remember we wanted to keep both side margins with 12mm, we’ve also made both the leading and the gutters for this document set to 3.75mm.

If you do not want to make the DGD fit completely into your layout, you should skip this part and jump into section 3. If you are willing to make the effort of having every aspect of your layout fine tuned, please keep on reading and prepare yourself to do some more math.

By keeping both side margins at 12mm with all the other values we’ve already set, gives us the problem that the DGD doesn’t fit in some of our gutters and columns

Please remember that we have a total of 280 DGD regarding the width of our document (210/0.75=280). So what we want to do right now is to find the width of each column in order to make every thing fit. By changing the side margins we are also changing the type area and for everything to be tight we need each column to have an even number of DGD. Another formula is needed:

X=12Y + 11Z + A + B

In which
X=page width
Y=column width
Z=gutter
A= outside margin
B= inside margin

Since in our example (and in any other work you’ve done if you’ve followed the previous steps) we have some values for our formula, it will look like this:

210=12Y + (11*3.75) + 12 + 12

This gives us that Y= 12.0625 This can’t work because you cannot ‘put DGD inside’ one column with that width!!!! But this number gives us a clue, if we use a column with 12mm, one can ‘put’ 16 DGD inside of it (12/0.75=16).

So it’s back to the drawing board to make some more maths. This time we are going to use this newfound number and ‘leave’ the outside margin to get bigger or smaller in order to make everything fit. Our formula now looks like this:

210=(12*12) + (11*3.75) + 12 + A

Hence, A= 12,75 This works, because we’ve just add to the outside margin one DGD.

Our final margins are now: Top: 18,75, Bottom: 12, Inside: 12, Outside: 12,75. The final margins aren’t that different from the ones I’ve set on my rough and every thing fits right in.

As a bonus we’ve also achieved that every column is the same width as the inside margin. You could have done this if you’ve used in our formula A=Y and B=Y.

Please note that there are a lot of ways of making all the math, lots of ways to work with the formula I’ve showed. This is just how I use it. Most people are afraid of math, but if you try this formulas a couple of times with real life examples, you’ll be at ease with the entire math needed.

3. Placing the guides

Now that every thing is in place and our math is done, all we need to do is place some guides in order to make the divisions needed.

I like to use guides with different colors in order to know what kind of division I’m using. I also do two master pages, one with the 12 columns plus the colored guides and another one without the 12 columns (I just copy the 12 column master and then take off the 12 columns). Mostly when I’m designing pages I use the master without the 12 columns.

The final document should look like this

4. Conclusion

There’s a lot of work involved in doing a Complex Grid. Some people might say that one could do a simple 12×12 grid and have all the divisions that Gerstner’s grid has plus one. The truth is, if you use a 12×12 grid you will easily lose track of the proportions that work in the Complex Grid.

Many designers use the rule of thirds in their design; you have it in the Complex Grid. The 1/2 ratio is also of great use and you have it also. Most important, one must understand that sometimes we aren’t making the grids for only our use; other people will be using it also. By making all the divisions with guides of different colors you are helping everyone that’s working with your grids in knowing what type of ratios they are using.

On the other hand, most of the times there’s no need for such a complex grid, but by learning how to built this grid, you’ll be able to built easier ones.
Remember, learn how to built a Complex Grid, learn how to use it, this kind of grids are very useful to boost your creative power, they are also very helpful to let you try different approaches on a work but still maintain a coherent look that shows professionalism.

Here is a pdf of the final grid if you want it

By: Pedro Monteiro