A solid grid-system enables rapid production and helps to form consistent designs. It is, therefore, important that all designers take the time to learn how to create complete and mathematically correct grid-systems which include dusting off our old trusted friends—the calculator, and the ruler.
To understand “the grid” it is first important to recognise the different parts of a complete and well-proportioned grid system.
The principal segment of a grid is the ‘document grid’ which guides margins, columns, and, most importantly, the baseline.
In a correctly constructed grid, copy will be positioned 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 regardless size of the font, the proportions of the document grid needs to be calculated from the leading and stand in mathematical proportion to the body copy. You therefore always need to start with defining the font-size and the leading of the body copy—before defining the grid.
This first step demands some calculations on the designers part as none of the software in Adobes suite offers this functionality out-of-the-box, and creating document grids, therefore, can be quite daunting for designers not having experience in creating grids outside the functionality offered by their design software.
After defining the document grid, the next step is to define what most designers incorrectly refer to as ‘the grid’; columns, gutters, and rows. This can be done using the standard functionality offered by all design software.
The final part of creating a complete grid-system is the definition of image lines, which are critical to obtain balance between text and imagery, but arguably is the least understood part of grid systems.
While many designers align imagery to the top border of the squares resulting from document columns and rows; imagery in a correctly constructed grid should align—not with the borders of rows and columns—but with the height of the letters X or H of the body copy font. Creating correctly positioned image lines also is not a functionality offered in any Adobe software why the skill of creating correctly aligned image lines is not well understood by many of today’s young designers.
An example grid
The image below displays a grid developed for The London Royal Opera. As can be seen, all copy including headlines is perfectly aligned—not only within columns—but also in relation to the document grid (grey lines), and all imagery also is aligned to the X-height of the body font-size (blue lines).