Typography: Getting more from the grid

Explore how grids can enhance your designs, and why breaking the rules is sometimes for the best.

As a student of design, I didn’t have much time for grids. I perceived them as being restrictive and counter to the aspirations of an emerging designer. As a practising designer, however, I quickly learned the benefits they offer and the hidden beauty they can contain.

Design agency Graphical House demonstrates how a simple set of carefully- placed elements can be engaging and elegant

Since the fourteenth century, the basis of the grid has changed little. Early religious texts contain text set in vertical columns, punctuated by images and embellished with drop capitals and marginalia (additional text annotations) – much like modern-day publications and magazines. A grid can be used on a single design, for example a poster, or over a series of pages such as in a book or brochure design.

The grid structure

Image 1 of 5

The grid consists of vertical and horizontal guides (A and B), additional hanging lines (C), gutters (D) and modules (E)
Image 2 of 5

This symmetrical approach is not often found in print
Image 3 of 5

Whereas this asymmetrical layout is more prevalent
Image 4 of 5

ext and images can be set at different angles. The 45 degree angle shown in this image is more common
Image 5 of 5

These unusual angles are rarely seen

In simple terms, a grid is a structure for the arrangement of text and image on a page or screen. Much like scaffolding on a building, and as shown in image 02, this grid is formed primarily of vertical and horizontal guides (A-B) that create columns for text and images. Additional ‘hanging lines’ (C) set key positioning points for text and images to align to, much like the alignment of paintings in a gallery setting. Inter-column space, or gutters (D), dictate the amount of breathing, or white space, around text and images. The use of both vertical and horizontal lines creates patterns or fields, often called modules (E), that can be populated by text and images.

There are two main structures for a basic grid layout: the symmetrical approach (see image 03), where each page is a mirror copy of the opposite page, and the asymmetrical approach (see image 04) favoured by modernist designers. The latter is arguably more active, with the basic grid structure implying horizontal movement and pace. Additionally, text and images can be placed on angles, at either 45 degrees as in image 05, or a combination of 60 and 30 degrees (see image 06).

Image 1 of 3

Design agency Triboro’s Paper of Record project shows playful embracement of the grid, while not being afraid to add personality and typographic celebration
Image 2 of 3

SEA’s work for Monotype celebrates many different typographic configurations on a rigid grid, for a conversational and engaging brand tone
Image 3 of 3

Texts can be cross-aligned to bring a sense of structure to pages that contain different type sizes

Finally, to effectively work with a grid type, images need to have a relationship to a baseline grid, which effectively anchors items. Text can be cross-aligned, with varying type sizes occupying some or all of the lines of the baseline grid. For example, if you have a 12pt baseline grid, the default type size and leading configurations of 10pt on 12pt leading, 20pt on 24pt leading and 40pt on 48pt leading will all fit to the same grid, cross-aligning and bringing a sense of structure to a design as the human eye looks for order and pattern (see image 09).

Embracing the grid

The grid should be used to aid the placement, order, hierarchy and structure of design elements, whether the design is for the printed page, online or even
for environmental applications.

Many designers have actively embraced the grid as part of their practice; not only as a tool to inform where to place an item of text or image, but also as a mechanic for design thinking about why to place an item in a particular place. The grid should be seen as part of the process of how we design, and not simply as a tool for desktop publishing.

International Typographic Style (often called Swiss Style) originated in the 1920s in Germany, Russia and the Netherlands, and rose to fame during the 1950s in Switzerland. Protagonists such as Josef Müller- Brockmann consolidated some of these theories into a manifesto, indicating that the grid is a tool for thought, and should be used to systemise, to clarify and to reduce content to its essentials.

Breaking the rules

In his classic reference book, Graphic Design as a Second Language, Bob Gill asks: ‘Have you ever seen autumn leaves, after they have fallen to the ground, arrange themselves in a boring composition? I haven’t. What about pigeons stopping in a pavement square?’

Gill’s observation is correct, the world is an incredibly interesting and diverse place, and the potential danger with a grid or system is that it can mediate spontaneous creativity and indeed the element of chance. Therefore a grid should be seen as a guide, not an absolute rule. The grid is a structure: a vessel to hold content. Having the courage to break that restriction can result in more dynamic and creative work.

Using measurement

Designbolaget’s work in the cultural and arts sector celebrates typographic honesty through the use of simple controlled grids and the confident use of typography

Arguably the most confusing element of designing a grid is understanding that you are often dealing with two sets of measurements that don’t naturally belong together. Point size and leading are generally set in points, as is the baseline grid. However, most publications, and indeed printing presses, predominantly use millimetres. For this reason, programmes such as InDesign have seemingly odd default settings. For example, margins by default are set at 12.7mm with a gutter measurement of 4.233mm.

If you convert these to the points system, you get a much more logical set of values: 30pt margins with 12pt gutter. For this reason, when initially designing a grid, it is worth giving extra consideration to how you make the two systems compatible. One approach is to create a grid that has a border to compensate for the irregular measurement, leaving you with a text block in the centre that has a rational points measurement. Alternatively, a page size built around a logical division of points can be used.

Grids in practice

In practice, grids offer designers an underpinning structure to their work, essentially taking the guesswork out of design. If carefully considered, these grids can have the spontaneity of the falling autumn leaves or pigeons mentioned earlier by Gill, while implying a satisfying sense of order and hierarchy.

Arguably, the best design work occurs when there is a certain amount of tension between control and freedom. When a designer has a sound understanding of grids and editorial structure, and also incorporates a sense of artistic, more intuitive flair into their work, truly great things are created.

This article was originally published in Computer Arts magazine issue 259. Buy it here.