A big part of my job as a creative director is to evaluate the work of designers and it never stops to surprise me how even some of the world’s largest agencies lacks fundamental knowledge of grid-based design.
To understand “the grid” it is first important to recognise the different parts of a complete grid system. The foundational segment of the grid is the so-called ‘document grid’ which guides document margins, columns and most importantly, the baseline.
In a correctly constructed grid as presented at the bottom of this post, the typography will be positioned exactly on the horizontal lines of the document grid; and here comes the tricky part. As each new line of copy (body and headlines) should align perfectly with the horizontal lines of the document grid no matter size of the font, the proportions of document grid needs to be calculated from the leading. Creating a document grid you, therefore, always start with defining the size and the leading of the body copy which then form the basis for all other page elements which need to stand in mathematical proportion to the body copy. This first step demands some mathematics as none of Adobes software offers this functionality and therefore can be quite daunting for un-experienced designers.
After creating the document grid, the next step is to build what most designers incorrectly refer to as ‘the grid’; in other words the definition of columns, gutters, and rows. The final part of a complete grid-system is the definition of the image lines which are important to obtain a balance between text and imagery and which also is the least understood part of the “grid.”
While many designers working with grids align visual elements to the top border of the squares made up of columns and rows; imagery in a properly constructed grid should align, not with the borders of rows and columns, but with the ‘x’ or ‘H-height’ of the body copy. This again is not a functionality offered by Adobe why the process of creating image lines can take some effort.
While not all design projects need to be based on a grid, campaigns with a range of different visuals always should be founded on a solid grid system as this enables a rapid development and help to form a consistent visual look in all campaign visuals. It is, therefore, important that all designers take the time to learn how to properly work with grid-based designs which include dusting off our old trusted friends, the calculator, and the ruler.
An example grid
The grid below displays a grid developed for The London Royal Opera. As can be seen, all copy is perfectly aligned, not only within columns, but also in relation to the document grid (grey lines), including headlines, and with imagery aligned to the X-height of the body copy (blue lines).
