In my last blog post, I discussed the rules of good typography. I intentionally omitted grids because I felt it’s not only limited to typography and hence deserved it’s own post. Grids in graphic design refers to a series of intersecting horizontal and vertical lines that are used to structure content on a page. Their roots are in traditional typography for typesetting books but they can be used for placement of any graphic design element in print, web or multimedia. Grids act as a framework that a designer can use to organize content in a rational manner.
Creating a grid is usually the first technical step of the graphic design process. Graphic designers begin with a blank page and begin dividing it up with guidelines, which can be turned on and off throughout the design process and are invisible in the final design.
Types of Grids
There are several types of grids the designer can choose from. Perhaps the simplest method is to use the rule of thirds. This involves dividing a page into thirds with two equally spaced vertical and/or horizontal lines so that important compositional elements can be placed along these lines or intersections. This method is also commonly used in photography. Another popular method uses the golden ratio (approximately 1.618) for proportioning. This ratio has been studied by mathematicians for its presence throughout the universe and has been used for centuries by architects, artists and book designers for it’s aesthetically pleasing qualities. My personal favorite method is to divide a page into several equal sized columns, which is often used in newspapers and magazines. These types of publications also commonly use a baseline grid, which is a set of horizontal lines on a page that the baseline of all type sits on.
Anatomy of Grids
Depending on the content that they will contain, grids vary in size, shape and complexity. However, every grid is made up of the following parts:
- Margins: The space that separates the content from the edge of the page.
- Flowlines: Alignments that break the space into horizontal bands.
- Columns: Vertical divisions of space on a page.
- Rows: A series of flowlines that create horizontal divisions of space on a page.
- Gutters: Space that separates rows and columns or two facing pages.
- Modules: Individual units of space created from intersecting rows and columns.
- Spatial Zones: Groups of modules that cross multiple rows and columns.
Purpose of Grids
Grids give order to graphic design. They speed up the design process by helping designers decide where content should be placed rather than where it could be placed. For example, in a newspaper with a five column grid, the designer knows to flow the text into those five columns.
Although grids should be used to structure content, they are only intended to guide the graphic design process, not dictate it. They shouldn’t be ignored nor should they be strictly followed. Simply flowing all the content into rows or columns can lead to a rigid, repetitive and uninteresting design. It is up to the designer to know when and how to break out of it. For example, while the main body copy may flow into single columns, some elements such as headlines, images and call outs could be extended across multiple columns or pages.
Grids aren’t visible to the audience but the use of them is evident by the alignment, spacing and grouping of elements on a page, the consistent placement of elements from page to page and across related documents.
Examples of Grids