Join Ina Saltz for an in-depth discussion in this video The grid: A structure for containing type, part of Foundations of Typography.
Grids are the building blocks of design. They are a way of dividing space, arranging content, and containing text. A gridded space gives us a structure, we can work strictly within that structure, or we may choose to selectively break out of that structure, either way it is really helpful to have a grid as a starting point. Various grids are built into InDesign and other programs, or you can create your own. The simplest grid is a single column width with a fixed depth and fixed margins, these are typical for books and scholarly journals, for example.
A more complex grid may vary in the number of columns and the way those columns can be combined. The 12 column grid used by Willy Fleckhaus at the German magazine twin remains a classic and is being used for web and mobile design as well as for print because it is so flexible. It divides evenly into six columns, four columns, three columns, and two columns or into numerous uneven combinations like 7 and 5 or 5, 4, and 3.
The more flexible a grid is the more useful it is because it can be reconfigured to suit many purposes. Using a grid as a template for multiple designs or multiple iterations of a design will do two important things, save you time and unify your project. This grid structure allows for columns of multiple widths to accommodate a variety of related stories. It is complex but organized. This spread utilizes a basic three column grid, on the second page the captions and infographics break out into a subsection of that grid.
Based on a variation of the Fleckhaus grid this page has a five column grid. The headline deck and intro text crossed the width of the five full columns underneath them. A separate story at the right is a subset of that grid, the hand in the illustration at the bottom and the glasses in the illustration at the top left break through the grid, creating a dynamic layout. When I work as an art director at Time Magazine our grid system allowed designers to make quick layout decisions which were essential in meeting our tight closing deadlines.
And the grids also created a seamless design environment that was cohesive as a whole, even though there were many designers working on one magazine simultaneously. But the system was flexible enough to allow designers to express a wide range of visuals keeping the magazine fresh and vibrant. Following a grid creates unity and violating the grid creates variety. Both unity and variety are principles of design that you can use to create cohesive and dynamic visuals.
The grid is an important tool in your visual arsenal.
- What is typography?
- Differentiating type characteristics
- Using ornamental and decorative type
- Combining typefaces
- Using contrast and scale
- Kerning and kerning pairs
- Choosing the optimum line length
- Aligning and spacing characters, words, and paragraphs
- Understanding factors affecting legibility
- Working with three-dimensional type
- Putting type in motion