Published in · 13 min read · Mar 10, 2020
Take any graphic design course today, and one of the first things you’re likely to learn about is the concept of a “grid”.
But things can quickly get fuzzy. Grids come in all shapes and sizes, and they have a long and complex history, stretching back to humankind’s very earliest manuscripts.
In this piece, we’re first going to bring some clarity by defining what a grid is, and then look at some of the most important types of grid used in print, web, and UI design. We’ll cover how grid use started with early manuscripts and the rise of the printed book, before moving on to developments in the 20th century, and even rebellion against grid systems.
Finally, we’ll share 5 top tips to remember as you start experimenting with grids!
In design, a grid is a system for organizing layout. The layouts could be for print (like a book, magazine, or poster), or for screen (like a webpage, app, or other user interfaces).
There are a lot of different types of grid, and they all serve different purposes. Here are some of the main examples:
Baseline grid. A baseline grid is a dense grid of equally spaced horizontal lines that determine where text will sit. Baseline grids are often used in combination with column grids, to make sure that the lines of text in each column align uniformly across a spread. A simple example of a baseline grid is a sheet of ruled paper, like you probably used at school!
Column grid. This is the most common type of grid used by graphic and web designers. It involves taking a page and splitting it into a number of vertical fields, which objects are then aligned to. Newspapers and magazines use column grids extensively.
Modular grid. Kind of an extension of the column grid, a modular grid involves taking a column grid and adding rows to it. The intersecting rows and columns create “modules” that can then be used to govern layout decisions. Magazines and corporate reports often use modular grids.
Manuscript grid. This is a one-column grid that simply determines where in a page the text will sit. Classic, “traditional” books use a manuscript grid, with the layouts of facing pages mirroring one another.
Pixel grid. If you’ve ever zoomed in close to a Photoshop document, you might have seen a pixel grid pop up. Digital screens are made up of a microscopic grid of millions of pixels, and sometimes designers get in close to edit images pixel-by-pixel.
Hierarchical grid. This refers to any irregular grid that accommodates specific content needs. A hierarchical grid may be completely freeform, or it might be composed of two superimposed grids, or other additional grid elements.
It’s likely that the oldest grid system was something resembling the baseline grid: guidelines-or “helper lines”-drawn onto ancient manuscripts that aided the scribe in creating text that was straight and evenly spaced. Simple column grids can be found in the Dead Sea Scrolls, where they served to organize text into readable blocks within a long, rolled-up document.
Some 1500 years later, this same principle readily transferred to early western printing presses. These machines required metal blocks of “movable type” to be loaded, one letter at a time, into a series of lines, to be manually inked and then pressed onto paper. For example, the Gutenberg Bible-the first western book printed using movable type-uses a two-column grid.
Newspapers from the late 19th and early 20th century expanded their use of large column grids, because they maximized the amount of information they could fit on a sheet of newsprint.
On a large piece of paper like broadsheet newsprint (which is about 30 inches by 23 inches), using columns means that a smaller type size could be used (often 8pt), and a short line length sustained within each column, maintaining readability. Without columns, the lines would be too long and difficult to follow.
The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.
—Josef Müller-Brockmann
Grids began to get more interesting in the early 20th century, when avant garde designers working in, or influenced by, movements like Bauhaus and De Stijl began to experiment more with layout. For example, mid-century designers Jan Tschichold and Josef Müller-Brockmann developed new grid systems in the form of sparse, typographic layouts and poster designs.
Müller-Brockmann in particular-one of the main exponents of the “Swiss Style”-pushed the limits of grids by creating modular and rotated grid systems. He published a detailed handbook (essential reading for any graphic designer) called Grid Systems in Graphic Design, and it represents a collation of the insights gained through his illustrious career.
As well as explaining the history of much typographical terminology, he discusses in depth how to choose margin widths that are both visually interesting and functional, and covers tricky details like how to place page numbers in relation to the grid.
One of Müller-Brockmann’s most important insights is that the success of a grid depends not just on how elements are placed within it, but also on how the grid itself is positioned in relation to its container. Today, in print design, the container is typically the page, and in web or UI design, it’s usually the browser window.
The title of the book is even slightly misleading to modern readers, because Müller Brockmann focuses as much, if not more, on the choice and management of type than strictly on the use of layout grids. In historical perspective, this reflects how abstract grid systems emerged out of the writing and printing of text; for Müller-Brockmann, grids and text were inseparable. In essence, grids began as a system for organizing text, and so they remain today.
Indeed, Müller-Brockmann’s recommendations for print layouts derive all modular decisions about grid rows and vertical gutters from the baseline text grid. He calls each of the resulting modules “fields”.
An incredible number of possibilities are created through the modular system that Müller-Brockmann developed, and the influence of his work can be seen in much graphic and web design today. For example, we can see a digital version of Müller-Brockmann’s modular system at work on the Guardian’s website (albeit without the baseline alignment):
Müller-Brockmann even explored the application of grid systems to 3D spaces, and grid systems have had a significant impact on the design of exhibition spaces, and on corporate interior design.
As a kind of postscript to the book, Müller-Brockmann looks at ancient “systems of order” drawn from nature and earlier human civilizations. As examples, he identifies honeycombs made by bees, and primitive maps of the proportions of the human body. He also looks at Egyptian pictograms, the Gutenberg bible, and music manuscript (which is a kind of detailed grid system, if you think about it). He also covers the geometry of traditional Japanese architecture, and even the support structure for the roof at London’s Crystal Palace.
Connecting this history to the modern designer’s practice, he concluded the book with this passage:
More and more, clients expect the designer’s work to be logical and systematic, not only on economic grounds but also with a view to image creation and cultivation, for a unified conception for a corporate identity cannot be produced by creativity which is solely emotional in origin. Design demands to a very high degree of not only emotional but also intellectual capacity for creative achievement.
—Josef Müller-Brockmann
In the second half of the 20th century, many more designers became celebrated exponents of grid systems. Take, for example, Massimo Vignelli and Wim Crouwel. Vignelli favored strict modular grid systems for his countless book designs, as well as in his work on public information materials for clients like the U.S. National Park Service and the New York Subway. Crouwel is particularly noted for his grid-based typography.
The revolution in computing and design software began in the 1970s, took hold in the 80s and 90s, and continues to this day. As well as rapidly changing the tools and techniques used by typesetters and printers, it created new opportunities for experimentation amongst designers.
In the era of analog printing presses and movable type, grids were a critical tool in allowing typesetters and printers to organize text and other graphic elements in a consistent and reproducible way. It was possible to break the grid and manipulate type, as Wolfgang Weingart did while a printing apprentice. However, achieving these effects meant subverting how conventional printing presses were designed to work.
With the arrival of desktop publishing, suddenly these technical and formal constraints-which had both informed and reflected the use of grids in graphic design-were removed.
Using early graphic design software like Pagemaker and Photoshop in the late 80s and early 90s, grids could be changed at the click of a mouse. A block of text could be resized and made to re-flow on screen. Images could be rotated, distorted, and layered. Whole publications could be mocked up quickly and cheaply on screen, without having to commit each experiment to a costly printing process.
This opened up a new era of experimentation in graphic design-one of the clearest historical illustrations of how new technical tools and constraints can drive the creation of novel work.
One of the best known figures to emerge from the experimentation of the 1980s and 1990s was David Carson, a professional surfer who developed an interest in graphic design, and initially learned his trade through a two-week graphics course at the University of Arizona, another short course in Oregon, and a 3-week workshop in Switzerland. Carson is one of the finest examples of how to become a designer without going to design school.
Carson worked on a number of skateboarding and snowboarding magazines in his early career (as did Aaron Draplin), but he really came to prominence when he was hired to design Ray Gun. These designs are notable for a number of breaks with graphic design convention, including the use of standard grids. It’s important to notice that the reason Carson’s designs are still visually effective, though, is that they still adhere to important principles of visual organisation, such as a contrast, balance, and proximity.
Also, there are typically also enough grid elements left intact to preserve the design’s fundamental purpose-to communicate meaning. For example, in the articles pictured below, although the columns of text are of different widths and are not separated by a gutter, each block of text still adheres to a baseline grid and clear left-and-right boundaries, meaning that the text ultimately remains readable. (Although this is not the case for the article about Bryan Ferry-which Carson disliked and therefore set entirely in Zapf Dingbats.)
Grid systems in graphic design have survived centuries, if not millennia, dating back to the earliest illuminated manuscripts. And in spite of the exhilarating anti-design experiments of the late 20th century, arguably grids have never been as widely used as they are today.
This is because of the dominance of the internet and digital devices, and in particular, because of the emerging need for websites and apps to resize and re-form themselves to accommodate whatever device they are being used on (ranging from huge TVs to smartphones and even tiny watches). For visual and UI designers today, column grids are an indispensable tool in creating designs that have enough structure to allow them to be flexible across multiple devices.
For example, in our free Figma 101 email course, you can create an app design using a 3-column grid for mobile, and then translate that design to a wider 12-column grid for desktop. This way of working is fundamental to the efficient creation of app designs today.
The persistence of grid-based design in web and app design has also been a challenge for developers shaping web standards. In the early days of the web, developers often used tables to organize a layout. Since then, standards have evolved and we now have systems like Flexbox and CSS Grid which offer a basic framework for faithfully implementing grid systems in websites and apps.
We sometimes think of constraints as a bad thing-particularly when it comes to creativity. We want to be free to express ourselves, and explore our wildest flights of creative fancy.
Experience, though, tells us that things are not that simple. We’re all familiar with the experience of sitting in front a blank page and having no idea where to start. And then when we do start, we feel directionless and quickly get stuck again. Often, we don’t make any progress and end up walking away.
It’s in this situation that creative constraints are extremely valuable. Rather than restricting our creativity, constraints give us a starting point and invest the freedom to explore possible solutions. The value of creative constraints is why the best designers always insist on working from a robust design brief, which defines the project’s requirements.
Grid systems provide constraints for layout and visual organisation, which simultaneously reduce the number of options available to the designer, yet also open up a vast array of constrained possibilities. Even a simple modular grid can hold thousands of layout options.
And even for anti-design rebels like David Carson, the existence of grids and other graphic design conventions actually created an important starting point in the form of having something to reject.
We hope you’ve enjoyed this brief history of grids in design! To wrap things up, here are our 5 top tips to remember as you begin experimenting with grid systems in your work.
1. Plan how the grid relates to its container
Josef Müller-Brockmann emphasized in his book Grid Systems that how a grid is positioned within the page-how the margins are set up-can have a big impact on how the grid performs, both functionally and aesthetically.
2. Don’t just design with a grid-design the grid
When opening up a new document to design a publication or website, it’s tempting to start with your “usual” grid-perhaps a number of columns you’re used to, or a gutter width you always use. But it’s worth staying on paper, and taking the time to work out what kind of grid your project actually needs. This can save you getting locked into a grid that doesn’t actually work for the thing you’re working on.
3. Always begin and end elements in a grid field-not in the gutter
The gutter-the empty space between columns-should be used to separate elements. Text and graphics can span multiple columns, of course-but they should begin and end at the edge of a column, not in the gutter.
4. Don’t forget about baseline alignment
Making sure that all the text in a column-based design also sticks to a consistent baseline can make a big difference to the sense of harmony and organisation in a page. Baseline alignment is often overlooked in web design-but with careful planning, it is possible to achieve.
5. For web and UI design, consider using a system like the 8px grid
Today our designs have to work and look crisp across a range of devices and screen resolutions. Using dimensions and spacing that are multiples of a base number helps to make these transitions clean and systematic. It is now common to use a 4px or 8px grid, because it means designs can scale perfectly on retina screens: one pixel on a low-resolution screen becomes a grid of 2 by 2 pixels on a high-resolution screen.
- Pentagram’s recent redesign of the MIT Technology Review is strongly influenced by the Swiss Style
- Timothy Samara has recently updated his comprehensive book, Making And Breaking The Grid
- Google’s Material Design guidelines cover 4px and 8px grid principles
- You can follow David Carson on Instagram!
- Here’s our ultimate guide to becoming a designer without going to design school
