Have you ever stopped to notice that we live in a grid? From the arrangement of pixels on the screen you’re looking at, to the organization of the urban cities in which the majority of the world dwells, this visual system of intersecting vertical and horizontal lines determines the form of more than you may realize.
It is no wonder, really, that we find ourselves so locked into the grid; for we design in one, too. Since the early days of print design, hundreds of years before the term “graphic design” even existed, the grid helped printers arrange their page layouts. Now, we use the grid to parse space in design software and determine the form of websites. Even if it remains entirely behind-the-scenes, you can presume that it’s there.
As designers, it’s important to understand the systems we inherit — basic as they may seem. So, we’ve put together this very brief history of the grid in art and design, from the (relatively) ancient days to the present. In this first part, we’ll discuss early Renaissance uses of the grid, the birth of modern grid design and a list of terms that anyone working in print design — book covers, for example — absolutely must know.
Olden Days: The grid before “graphic design”
Renaissance painting made use of mathematical principles to develop linear perspective, as indicated by the lines superimposed here
While Renaissance painting may seem a far cry from something like a page layout, it was this marriage of architecture and visual representation that first produced the grid (although it was not called that at the time). You may notice these canons of “perfect geometry” result in centered, symmetrical page layouts — not quite what we’re used to today. However, notions like the “golden rectangle” — a rectangle with the proportions of 1:1.618 that, when you subtract a square from it, yields another rectangle of those proportions, remains a lasting design concept.
A description of the golden rectangle, from Thinking With Type
In the 13th century, the architect Villard De Honnecourt came up with a famous diagram used for producing page layouts with margins of fixed ratios — what was considered a “harmonious” design. This, as you can see, remains a guiding principle in the design of print objects such as book covers.
Villard’s diagram has determined the proportions of books from the Renaissance through the present, as shown by retinart
Swiss Order: The modern grid takes form
As capitalism reached maturity in the late 19th century, people began to think of graphic design as a profession in itself, and the first people to call themselves designers, like William Morris of the arts and crafts movement, began searching for words with which to describe their activities.
The grid did not enter the graphic design lexicon until around World War I, in Switzerland. One of the only neutral countries in the war, Switzerland became a meeting ground for intellectual refugees from all over Europe. It was also one of the few places where printing supplies like paper and ink weren’t heavily rationed. These conditions amounted to a lot of sharp people printing a lot of multi-lingual documents, often with columns of French, Italian, German and English. This presented a design problem that typographers like Herbert Bayer and Jan Tschichold stepped up to address.
One contribution of these designers was a turn away from the centered text positioning to an “asymmetric” approach meant to feel more natural for people reading left-to-right. Such an approach aligns text flush-left, ragged-right, often positioning the body of text slightly further to the left or right to leave a bigger margin for notes.
The pages from this book exemplify the modern, asymmetric page layout: text flush left, ragged right, and shifted somewhat more to one side — in this case, the right
The rule of thirds, another grid-based canon that you may be familiar with, operates based on a similar assumption that images are more dynamic and engaging when the focus is somewhat off-center.
The “rule of thirds” in photography echoes the principle that asymmetric design is more natural and dynamic. Photo by Trey Ratcliff
A number of page layout terms also emerged from these endeavors. You should be familiar with all of them:
Gutter: the space between columns of text
Column inch: a reference to the vertical length of a column of text
Jump: the continuation of a flow of text from the bottom of one column to the top of another, or onto another page
Rail: a thinner column (typically about half the width of the other columns) at the far left or far right of a page, typically providing directory information for, say, a newspaper.
Hang line: like a horizontal rail, this is a line that separates information at the top of a page (such as an image, for example), from the text below, which seems to “hang” from the line
Single column grid: such as what you would find in a typical book
Multi-column (vertical) grid: such as what you would find in a typical newspaper
Modular grid: a grid that involves about as many horizontal divisions as it does vertical ones, making for an especially flexible model of text and image arrangement
(Top to bottom): a multi-column grid, a newspaper that employs the predominantly vertical grid format, and a modular grid that demonstrates the added flexibility of this approach; from Thinking With Type
Once the rules of grid design were set, designers promptly got to work breaking them. That, along with the modern incarnation of the grid in web design, will be the topic of “History of the grid, part 2”. Stay tuned!