Readymag Design Almanac: Grid

Almost every layout has axes, invisible guidelines along which the key elements — text blocks, headlines, illustrations — are arranged. These guidelines are the elements of the grid. A grid can be very primitive and, for a book with a simple structure, may merely to be the baselines and margins of the text. Or it can be very complex, since it will have to deal, say, with the variety of texts, headlines, photos, announcements and graphics that make up a newspaper. For a multi-column magazine, the grid may unexpectedly change the number of columns from section to section, or on a website extend or compress in response to the width of the browser.

The structural basis of a composition is not always visible to the inexpert eye, but a layout without a grid is unlikely: it is almost surely there.

Books or articles on the history of typography can frighten the novice with talk of mathematics and geometry, references to Fibonacci Sequences, the Golden Ratio, le Corbusier’s modulor and the work of the Swiss modernists. But the construction of modular grids, although often based on complex relationships between whole and part, is a matter of practical necessity. A person who has once faced the problem of designing a multipage document knows how extremely wearing it is to think anew on every page about where to put headlines or captions or what size type to use for a three-line heading and how much space to leave between it and the start of the text.

The process is made many times easier when you define the axes and margins for a group of pages. As to the theories just mentioned (which are complex only at first glance), they are merely various ways to help come up with a module. On the other hand, if you are confident in your own artistic sense, you can establish the main guidelines with your eye and forget about the Golden Ratio. The most important function of the modular grid is to ease the work of the designer in devising a multi-element or multipage layout.

A multipage publication, as a rule, contains a large number of visual elements, and their being seen as parts of a clear and well-thought-out structure simplifies the designer’s job.

Say, for example, that you have arranged the elements of the job on the page without regard to prior rules of any kind. Every element will suggest its own axis, and the result would be chaotic, although it might also have a certain charm. Now take other elements and set them in the same places on the page, print the pages and compare them. Our brains compare the arrangements of the two pages and, finding a relationship, tell us that they are “cousins.” Here we have one of the important aspects of a grid — it helps us achieve stylistic unity. And this is true not just for “multipage documents,” for a unified design structure is essential for other genres as well.

Lines and margins have always been made distinctive, and the ancient manuscripts had their “grids.” Early printed books gave serious attention to the size of margins,
the proportions of the format and its relation to the body text. However, grids as an artistic method as such became popular in the 1950s and 1960s and are largely associated with the emergence of the Swiss school of graphic design.

The Swiss designers were modernists, inspired by abstract art, international-style architecture and industrial design. Structure and technology were as important to them as economy and simplicity. They actively employed the principle of modularity, that is the division of the page or spread into a certain number of equal parts, or modules, with all spaces in the layout being multiples of the module size.
It was this that gave their work its special industrial-engineering aesthetic. Modular grids were used for brochures, newspapers and magazines and even used where they were unnecessary, as in posters. Since then grids have become a regular component of the graphic designer's armory of tools.

One of the most famous examples of modular page planning is the “golden canon” popularized by Jan Tschichold. This medieval idea of structure is based on a page of nine equal parts with sides in proportions of 2:3. The text area has the same proportions. The point at which the half- and full-diagonals intersect is one-third of the height and width of the text frame and the page.

Everything in the fine arts depends on proportions and relations. The experience of artists in earlier centuries hinted at the existence of elusive laws of beauty, responded to by all viewers, that were at bottom mathematical. Painting, icons, photography are obvious examples: the canvases of Botticelli, icons in churches and the photographs of Cartier-Bresson — all have the axes of the Golden Ratio. Many designers are in the habit of calculating everything — format, grid modules, relationships of type sizes. There exist two basic kinds of proportions — the rational and the irrational.

introduction

invisible lines

an easy recipe

structure helps

the reader

module

as

means

structure and

integrity

proportionality