Grid (graphic design)

A typographic grid composed of a series of intersecting vertical and horizontal axes.

Typography arranged "flush left" ("ragged right") along grid.

A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.

The less common printing term “reference grid,” is an unrelated system with roots in the early days of printing.

History

Antecedents

Before the invention of movable type and printing, simple grids based on optimal proportions had been used to arrange handwritten text on pages. One such system, known as the “Villiards Diagram,” was in use at least since medieval times.

Evolution of the modern grid

After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced by the modernist ideas of Jan Tschichold's Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.

Reaction and reassessment

By the mid 1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.

Grid use in web design

While grid systems have seen significant use in print media, interest from web developers has only recently seen a resurgence. Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts. Some grid systems specify fixed-width elements wtih pixels, and some are 'fluid', meaning that they call for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. A List Apart. To find out more about Responsive Web Design and how to create a fluid grid, read Chapter 6: The Flexible Grid in Handcrafted CSS by Ethan Marcotte.

Some examples of grid system frameworks are:

• The 960 grid system
• The Responsive Grid System
• grid system generator
• The Semantic Grid System
• Modular Grid Pattern

References

• Baines, Phil and Haslam, Andrew. Type & Typography, second edition. New York: Waston-Guptill Publications, 2005. ISBN 0-8230-5528-0.
• Burnhill, Peter. Type spaces: in house norms in the typography of Aldus Manutius. London: Hyphen Press, 2003. p. 101.
• Elam, Kimberly. Grid Systems: Principles of Organizing Type. New York: Princeton Architectural Press, 2004. ISBN 1-56898-465-0.
• Hochuli, Jost. Designing Books: Practice and Theory.
• Hurlburt, Allen. Grid: A Modular System for the Design and Production of Newspapers, Magazines, and Books. Wiley: 1982. ISBN 0-471-28923-X.
• Le Corbusier The Modular I.
• Müller-Brockmann, Josef. Grid Systems in Graphic Design. Niggli: 1996. ISBN 3-7212-0145-0
• Ruder, Emil. Typography. Hastings House: 1981. ISBN 0-8038-7223-2.
• Rudolf Bosshard, Hans. The Typographic Grid. Niggli: 2002. ISBN 3-7212-0340-2.
• Khoi Vinh, Oh Yeeaah! Grids are good, South by Southwest Conference Presentation, 2007. [1]
• Antonio Carusone, Designing Grid Systems For Flash.[2]
• Marcotte, Ethan (March 3, 2009). "Fluid Grids".

External links

• Design by grid Articles, Resources, Showcase, Tutorials
• Medical website design with use of Grid
• The Grid System Looking at the technical aspect of grids in practice, with many resources.