History of Grids

(Reference: http://www.graphics.com/article-old/brief-history-grids : 02/12/17)

What is a Grid?

A grid subdivides a page vertically and horizontally into margins, columns, inter-column spaces, lines of type, and spaces between blocks of type and images. These subdivisions form the basis of a modular and systematic approach to the layout, particularly for multipage documents, making the design process quicker, and ensuring visual consistency between related pages.

At its most basic, the sizes of a grid’s component parts are determined by ease of reading and handling. From the sizes of type to the overall page or sheet size, decision-making is derived from physiology and the psychology of perception as much as by aesthetics. Type sizes are generally determined by hierarchy—captions smaller than body text and so on—column widths by optimum word counts of eight to ten words to the line, and overall layout by the need to group related items. This all sounds rather formulaic, and easy. But designers whose grids produce dynamic or very subtle results take these rules as a starting point only, developing flexible structures in which their sensibility can flourish.

The First Five Hundred Years

Philosophers and linguists have argued that nothing exists in our consciousness unless it is named and we have a language with which to discuss it. Neither "graphic design" nor "grids" were talked about until the mid-twentieth century. Once named, complex grid structures comprising multiple columns, fields, baseline grids, and so on poured forth as never before, but it’s not true to say that designers or their predecessors—commercial artists, printers, and scribes—hadn’t been thinking about content, proportion, space, and form before this.

Even prior to typesetting and printing there were texts available to read. These were religious texts laid out by scribes in calligraphy. The pages were surprisingly modern, often using more than one column, with lettering that was ranged left, and colour and variations in letter size used for emphasis. Just as the first cars resembled a horse-drawn carriage, the first printed pages took their cue from the manuscript page. But over time one major difference was introduced—justified setting. In this, spaces between words in continuous text are adjusted in each line so that columns align on both left and right sides. Although manuscript pages were symmetrical when viewed as spreads, the ranged-left lettering made them essentially asymmetric. With justified setting came 450 years of symmetry, and it wasn’t until the twentieth century that this convention was truly challenged.

This spread from The Meditations of Marcus Aurelius Antoninus, published in 1792, uses the golden section to determine the text area, and the Fibonacci sequence to arrive at relative margin sizes (inner margin 3 units; top and outer margins 5 units; bottom margin 8 units). The gutter is treated as the central axis, and there is one column of text. The outer and bottom margins are larger than the inner and top. These optical adjustments ensure that the text doesn’t appear to be falling off the bottom of the page. 

Proportion and Geometry

From the beginnings of printing (from the mid-fifteenth century) until the Industrial Revolution (late eighteenth century), the book was the primary output of printing. Apart from verse, type was generally set in one justified column per page, placed symmetrically on the spread with larger outer margins than inner, and a larger margin at the foot than at the head. But just as each decision made in minimal art is hugely significant, so too were the relative relationships of these few elements on the page. The proportions of these pages and margins were determined by geometry, concerned with the relation of points, lines, surfaces, and solids to one another rather than their measurement.

There are many geometrical constructions that can produce a beautiful page, but the golden section is usually cited as the most successful. As it is a geometrically derived form, it can be drawn with a set square and a compass—no measuring required. For those who do like to know measurements, the relationship of short to long side of a golden rectangle is 1:1.618. Many contemporary designers find this apparently irregular ratio unsettlingly chaotic, but others feel that the number sequence at its core has almost magical properties. By adding the lengths of the long and short edges it is possible to arrive at the next measurement in the sequence to give a bigger rectangle of the same proportions. This also works in reverse in order to make a smaller rectangle.

Adding two numbers to find the next in a series is also the basis of the number progression of the Fibonacci sequence, named after the thirteenth-century Italian mathematician who first identified it in many natural forms, from the arrangements of petals to the spirals of seashells. A combination of the golden section and Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, etc) was often used to determine the overall proportion of the page and margins of the classical book.

Design was born partly as a response to the Industrial Revolution. This spread from the English Illustrated Magazine of 1884 shows, designs began to compete for attention. the resulting visual confusion may have a charm, but the random layouts where confusing and often inaccessible. contemporary designers considered this a problem so began to explore alternative theoretical approaches.

The Next Hundred Years

The Industrial Revolution marked the beginning of a capital-based economy, with mass production at its heart. Graphic design was born, although still not named as such. Its job was to communicate diverse messages to an increasingly literate people. The rise in print output was phenomenal—posters, leaflets, and advertising of all kinds, newspapers, timetables, and all manner of information-based design. Suddenly designs competed for attention. Images, initially in the form of engravings and then as photographs, had to be incorporated along with an ever-expanding array of display typefaces. Highly skilled and educated printers stayed firmly in the land of the book, while jobbing printers and compositors struggled to lay out this diverse material for which the classical book was not a useful precedent.

Toward the end of the nineteenth century, artists and thinkers identified this as a problem that had to be solved. Although the work produced by William Morris and the Arts and Crafts movement may appear very different from that of modernism, Arts and Crafts was its forerunner in one important respect. Morris believed that form and function were inextricably entwined. Running almost concurrently with these ideas were the revolutionary cubist experiments of Picasso and Braque, who were exploring how to represent 3-D forms on 2-D planes, producing increasingly abstract results. Artists, and then designers, were influenced by this work, and re-evaluated composition as a result.

This page is from an issue of the Futurist magazine Lacerba, published in 1914. By breaking with previous approaches to layout and design, early twentieth-century art movements had an influence on the development of the grid. The work was often intentionally chaotic, but as the old rules were broken, a new, more rational system was given the space to develop.

The early twentieth-century art movements—futurism, dadaism, surrealism, constructivism, suprematism, and expressionism—also had an influence on the development of the grid. Artists were united in trying to represent a new, industrialised age exemplified by speed of travel and faster communication. They recognised the power of the word and broke with all previous print tradition by using type at conflicting angles or on curves; introducing extreme variation in type sizes; using drawn, abstracted letterforms; and generally ignoring the vertical and horizontal nature of type. For the first time, space was used as a dynamic component in typographic layout. The ethos that underpins this work was the antithesis of the rational and logical approach implicit in the grid. But in drawing such a resolute line under the past, it opened the door to de Stijl, the Bauhaus, and typographers like Herbert Bayer and Jan Tschichold, who called for some order to be imposed on what seemed like fractured chaos.

This spread and throw-out is from Jan Tschichold’s seminal work Asymmetric Typography, originally published in 1935. In it Tschichold argued that typographic consistency is a necessary precursor to understanding, and described designers as akin to engineers. His work was nevertheless aesthetically refined and dynamic. Here he explains the parallels between abstract art and typographic layout.

de Stijl, the Bauhaus, and Jan Tschichold

In 1917 Dutch architect, designer, and painter Theo van Doesburg founded de Stijl. The importance of this movement to the grid is that it explored form as determined by function, and placed this in a political context. Arguing that simplicity of form was accessible and democratic, its members advocated minimalism, using only rectilinear forms, and eradicating surface decoration other than as a byproduct of a limited colour palette: the primaries plus black and white. The typographers affiliated to de Stijl wanted to apply these ideas in the real world, not just for their artistic cause. Designers like Piet Zwart and Paul Schuitema used these principles to produce commercial advertising and publicity materials.

The Bauhaus opened its doors in Weimar, Germany, in 1919, with the architect Walter Gropius as its Director. His belief that architecture, graphic art, industrial design, painting, sculpture, and so on were all interrelated had a profound impact on the development of typography and graphic design long after the school was forced to close by the Nazis in the 1930s. Within an astonishingly short period of time, graphic artists were marrying analytical skills with abstract form to arrive at mass-produced designs determined as much by political idealism as by a desire for self-expression. In 1925, Herbert Bayer was appointed to run the new printing and advertising work-shop. He paid attention to typographic detail, experimenting with a limited typographic palette in order to achieve greater visual clarity and easily navigable pages.

During the late 1920s and the 1930s, typographer Jan Tschichold set out his typographic principles in two seminal books: The New Typography (1928), and Asymmetric Typography (1935). Tschichold’s work was more refined than much of that which had preceded it. He wrote of typographic consistency as a necessary precursor to understanding, described designers as akin to engineers, and argued compellingly for asymmetry as a central tenet of modernism. It was the logical way to lay out text that is read from left to right, and produced "natural" rather than "formalist" solutions to the new design challenges than classicism, with its enforced central axis. In his work Tschichold explored subtle horizontal and vertical alignments, and used a limited range of fonts, type sizes, and type weights.

Several post-War Swiss designers are the best-known exponents of the grid. This spread is from Josef Müller-Brockmann’s Grid Systems in Graphic Design, in which he explains, in meticulous detail, how multicolumn and field-based grids can be used flexibly to achieve any number of different layouts, in both 2-D and 3-D work.

The ingenuity of the "A" paper sizing system appeals to designers who are interested in modular approaches to design. For the true modernist, working with standard paper sizing is more economic and celebrates mass production. But, for designers who want to usurp the system, there are countless ways to subdivide the sheet sizes to arrive at more unusual formats.

The Grid and Swiss Typography

Early modernists had explored layout, space, and scale. They had talked of the democratising benefits of mass production, and had used the language of science as much as art. They had argued for consistency and minimalism as a mark of design confidence and greater accessibility. During WWII, and in the decades that followed, these ideas coalesced into a coherent design manifesto with a new design device at its core—the grid.

The grid and Swiss typography are synonymous. Switzerland was neutral during the war. Not only did it attract many intellectual refugees, including designers like Jan Tschichold, but also most peacetime activities continued as normal, and supplies of such things as ink and paper weren’t rationed. Added to this, publications had to be set in its three official languages—French, German, and Italian—which called for a modular approach, using multiple column structures.

Several Swiss artist/designers, most notably Max Bill and Richard Paul Lohse, explored systematic forms in their paintings concurrently with graphic design, while the graphic designers Emil Ruder and Josef Müller-Brockmann both wrote educative texts explaining what grids were and how to use them. They approached the subject with great rigour, arguing passionately that "integral design" required structures that would unite all the elements in both 2-D and 3-D design: type, pictures, diagrams, and space itself. Despite their enthusiasm for order and precision, they both understood the value of artistic intuition.

"No system of ratios, however ingenious, can relieve the typographer of deciding how one value should be related to another… He must spare no effort to tutor his feeling for proportion… He must know intuitively when the tension between several things is so great that harmony is endangered. But he must also know how to avoid relationships lacking in tension since these lead to monotony."
Emil Ruder, Typography

The grid and the design philosophy of which it is a part have been criticised for placing the narcissistic designer at the heart of the solution, and generating formulaic solutions that are mechanistic, unyielding, and rigid. But for Ruder, Müller-Brockmann, and many other designers since, the grid was the natural response to a design problem. It was also a metaphor for the human condition, and was found in all areas of human endeavour.

“Just as in nature, systems of order govern the growth and structure of animate and inanimate matter, so human activity itself has, since the earliest times, been distinguished by the quest for order… The desire to bring order to the bewildering confusion of appearances reflects a deep human need.”
Josef Müller-Brockmann, Grid Systems in Graphic Design

The Swiss designer Karl Gerstner’s 1962 grid for the periodical Capital is near perfect. His unit, both horizontally and vertically, was 10pt—the baseline to baseline measurement of the text type. The type area was a square of 58 units. Allowing for inter-column spaces, this gave Gerstner grids of two, three, four, five, and six columns and fields.

Grids and Mathematics

The difference between grids as we know them and the page layouts of the past rests in increased flexibility and mathematical dexterity. This starts with considering format and ends with baseline grids, for which lines are often subdivided into units as small as 2pt. The computer has made greater precision easy, and contemporary grids subdivide the page into small component parts that can be combined in numerous ways that still ensure cohesion in the design. Small columns are joined to make wider columns, numbers of baseline units are joined to make fields, and so on.

Karl Gerstner’s grid for the journal Capital, designed in 1962, is still often cited as near-perfect in terms of its mathematical ingenuity. The smallest unit in Gerstner’s grid, or matrix as he called it, is 10pt—the baseline to baseline measurement of the text. The main area for text and images is a square, with an area above for titles and running heads. The cleverness lies in the subdivision of the square into 58 equal units in both directions. If all inter-column spaces are two units, then a two-, three-, four-, five-, or six-column structure is possible without any leftover units.

Having started the journal Octavo, designers 8vo edited and designed it from the mid 1980s to the early 1990s. The design often explored systematic and modular approaches, but in issue 7 the designers chose to reveal their methods by giving the grid coordinates, like a map, and printing it as a background to each page.

Dutch designer Wim Crouwel is known for his exploration and experimentation with grids. In this poster for the Vormgevers exhibition in 1968, he made the grid visible. This device then formed the basis not only for the layout, but also for the lettering.

The Grid Made Visible

Grids are generally made visible only through use, but some designers have exposed the workings of the graphic design machine to demonstrate that the grid is something not only of utility, but also of beauty. Once visible, the precision of the grid acts as evidence of design credibility, and its purity of form has a mystical draw.

The Dutch designer Wim Crouwel pioneered the application of systematic design in the Netherlands during the 1950s and 1960s. His identity for the Vormgevers exhibition at the Stedelijk Museum in Amsterdam in 1968 used an exposed grid in the layout of posters and catalogs, which was also the basis of the lettering. In 1990, issue 7 of 8vo’s influential journal Octavo ran grids with coordinates, like maps, under each spread. Octavo called their method of working "visual engineering."

"To get things built, you have to be able to describe them… The act of specifying requires one to define the structure of a design very precisely… It places one's design under intense scrutiny in terms of structure and logical process. Very different to the 'drag and drop' computer screen environment, where close enough is often good enough."
Mark Holt and Hamish Muir, 8vo: On the Outside