While there is more than one system of designing a publication’s layout, the ones I worked for were primarily based off of a (relatively simple) grid. The idea is to provide a simple way to put everything in proper (consistent) place without having to reinvent the wheel each time you go to create a new issue.

It is pretty common to save space around the edge of each page where nothing that needs to be printed will be placed. There are multiple reasons for doing this, primarily to do with the printing process. While there are ways to work around it, generally speaking printing presses need room to actually grip the paper to pull it through, and some “wiggle room” in case the paper is not quite lined up correctly.

Within the remaining space, one would need to decide how many columns to have. This would partially be determined by factors such as the typeface we were using and the size of the type as you don’t want to have lines of text that are incredible short, but also want to have a fairly flexible layout.

I’ll show you what I mean.



Our lines of text in the top image (3 columns) are a bit short, but functional. The lines in the bottom image (5 columns) are so squished that reading is going to become difficult. If the text itself was smaller, one could conceivably look at smaller column widths, but in this case it would create problems.

Next, things like pagination, a masthead, headlines, advertising and photos need to be considered. Chances are the publication is going to place the masthead and page numbers in the same place every time so those can have a reserved space.

Typically one would have rows breaking up the page vertically as well. While these might be ignored at times, they give a framework on which to build. For the publications I worked for, these row sizes corresponded to advertising sizes. That way when we sold an ad that was 1 column wide and 2 rows high, we knew exactly how much space to save for it before it even came in. The more complex your page became, the more important these rows became.

Let me show you a few more quick things:Image

Although the row breaks is not incredible clear here, you can see based on how the text at the top lines up with the top “image” (red square in our sample) that would be the edge of one of the rows. Another can be seen at the edge of the second column of text and the second image.

The second (lower) “image” “breaks the grid.” Sometimes this can work nicely, but here it creates some awkward spacing within the second column. If it fit directly within a column width, it would avoid this issue.

Further down we see a subhead that creates two issues of its own. The first is the awkward “trapped white space” to the right. The second is that the change in type size throws the rest of the column off so that that the text no longer lines up evenly with the text on either side (seen most clearly at the bottom).

Careful planning of the grid can help with both of these issues, but a degree of it is always going to threaten to appear and may at times require creative problem solving.

For a more detailed examination of grids, visit http://www.thinkingwithtype.com/contents/grid/