If you’re new to using the grid system, you might have been a little confused by last week’s post. You may have been thinking that you have to reduce all your text or crop your images to fit into those skinny little columns.

Remember, the grid is just a tool. Use it to enhance your designs and make laying out images and text easier on yourself. How do you do that? Build a grid first, then put on your creativity hat! Have fun!

Placing Images and Text

Both images and text can be placed in such a way that they span multiple columns. Perhaps you have a three column layout and you decide to take up two columns with text, but it looks a little squishy to put the copy in two columns side by side. Stretch out the text box to span both columns! If you have a silhouette skyline photo of New York for an editorial article, place the image across all three columns. See the bottom of this post for examples of elements spanning multiple columns.

Tip: when figuring out how wide to make your text columns, remember that readability is important. A good rule of thumb for the width of a column of text is to make it twice the point size of the text in picas (1 inch = 6 picas = 12 points). So if you’re body copy is 12 points, make the column 24 picas, or 4 inches, wide.

Facing (Mirrored) vs. Non-facing

While figuring out a grid, you’ll need to decide if you want the pages to mirror each other or be exactly the same. This mostly has to do with the inner and outer margins or the gutter and thumb spaces.

Facing spreads will have the same margin widths on the outsides of all the pages and the inner measurements will match each other (not necessarily the outer margins) as well. This is the most common type of setup.

Non-facing spreads will have the same margins on the left sides of all the pages and the same margins on all the right sides. In other words, the master page grid is designed as a single page, not as a spread. The advantage of designing your piece this way is that it doesn’t matter which side the page is on because both the left page and right page are identical in terms of the grid structure.

Overlapping Grids

You can get really creative with overlapping grids. I have never tried this myself; it seems a little confusing to me and you’d have to have a good system planned in order to make it work. But I thought I’d present you the idea and see if you’ve used it, want to try it or have examples of it.

The idea is to have one grid for the images and captions and one grid for the body copy. For example, you would take a 5 column grid for the body copy and a 3 column grid for the images and use one or the other depending on the element you’re working with (image vs. copy). Sounds interesting, doesn’t it?

Examples

A List Apart
The definitive authority on web design uses a 5 column grid with approximately ¼ of an inch for the alleys between the margins. What do you think? Does it work?

Girl Scout Annual Report
This is a piece from my own portfolio. I also used a 5 column grid here. (See the full report)