A guide to grids and why they’re used

How can you make your post more reader-friendly? One of the key design tools that helps achieve this is a grid. Think of it as a frame to help organize information. Today we will share what they are, how they were first used, and their significance in media design.

Why do we need grids?

Originally, grids were used in newspaper printing to improve efficiency. Paste-ups served to reduce the costs of employing full-time typographers by standardizing the page layout and saving time for graphic designers. Soon, paste-ups were replaced with much more flexible modular grids.

In the early 1960s, in line with the new trends, graphic designer Peter Palazzo updated the design of New York Herald Tribune. In 1966, art editor Janet Collins introduced a new design of The Times newspaper in London. Both innovations proved to the industry that a uniform design contributes significantly to the quality of the interaction between the media and its readers. Newspapers and magazines were quick to realize just how helpful grids were and, naturally, equally quick to introduce them into their own work.

Both in the paper media era and in our digital age, grids are effective in engaging readers by improving text readability and overall experience. In today’s media design, grids help to optimize articles and make publishing more structured and coherent.

What types of grids can be found?

There are a ton of grid types and configurations: from the simplest squares, like the kind in graph paper notebooks, to sophisticated, compound structures with varying spaces between horizontal and vertical lines.

We have collected the most commonly used grids – the ones that have already become modern design classics. Getting acquainted with these will give you a better grasp of modular design.

Square grid

The simplest of all, squares formed the basis for the grid system. The square grid consisted of squares and looked like an ordinary box table. It was first used in the late first quarter of the 20th century. Graphic designers from Zurich and Basel worked on upgrading it in the years following the end of the war, which coincided with the rising popularity of Helvetica and other similar fonts. This gave birth to the Swiss typographic style.

Max Bill’s grids

Max Bill was the first designer to use this kind of system approach in book publishing when he designed “Die Neue Architektur” (“New Architecture”). In that book, published in 1940, Alfred Roth first split the page into 9 horizontal modules, which helped to accommodate both images and the book’s trilingual copy with maximum efficiency. Several years earlier, in an interpretation of Bauhaus design, Bill made use of a 6-module grid in his famous Negerkunst poster that he had created for a 1931 exhibition of South African prehistoric rock painting.

Willy Fleckhaus’ 12 column grid

In 1959, the designer created his own model of a grid adapted for large format pages. It was initially commissioned by Twen magazine, but in later years Fleckhaus made use of it more than once while working with different publications.

Karl Gerstner’s compound grid

The grid designed by Karl Gerstner for Capital Magazine is a great example of the drastically increased design complexity. As Allen Hurlburt described it, “This is basically a 6-column pattern with a 4-column pattern superimposed. This grid also allows you to choose 6, 4, 3 or 2 columns, but it moreover provides the initial 5-column layout option. This grid requires much experience to handle, and a graphic designer will have to earn that experience by trial and error.”

Are there any alternatives to grids?

Grids are merely one of the many tools at a graphic designer’s disposal. Modern-day innovations provide designers with ample opportunities: in the early 1990s, at the dawn of the internet, websites were designed using HTML tables. Designers either chose to use grids or ignored their existence altogether depending on what they saw fit. HTML code made it possible to wrap the text around images (the float property). This, however, did not always look good in practice. What came out in the end seemed rather amateurish because designers lacked an underlying structure that would help them to organize information.

With the adoption of mobile devices, design approaches had to be revised. Designers realized that complex design looks horrible on smartphone screens, while catchy animated banners often only irritate users. Moreover, some elements had to be removed or simplified to help with the loading speed. It is very common to use column grids to create adaptive websites (Setka does this too). There are still some designers who choose not to use them, as they believe that grids are a serious constraint to creative freedom. But our advice is, nevertheless, to get the hang of grids as much as possible — rules ought to be known before they are broken.

To master the use of grids, you would do well to delve deeper into theoretic and practical graphic design, as well as analyse the grids used by your favourite media. This will help you understand what modern-day web design is all about, identify helpful tips and ideas, and accumulate interesting references that will help to make your online media look better and attract more readers.