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.

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

Max Bill

Max Bill was a Swiss architect, artist, painter, typeface designer, industrial designer and graphic designer.Bill was born in Winterthur...

, Emil Ruder

Emil Ruder

Emil Ruder , Swiss typographer and graphic designer, who with Armin Hofmann helped to found the Schule für Gestaltung Basel and a graphic style known as the Swiss Style....

, and Josef Müller-Brockmann

Josef Müller-Brockmann

Josef Müller-Brockmann, , was a Swiss graphic designer and teacher. He studied architecture, design and history of art at both the University and Kunstgewerbeschule in Zurich. In 1936 he opened his Zurich studio specialising in graphic design, exhibition design and photography. From 1951 he...

, influenced by the modernist ideas of Jan Tschichold's

Jan Tschichold

Jan Tschichold was a typographer, book designer, teacher and writer.-Life:Tschichold was the son of a provincial signwriter, and he was trained in calligraphy...

 Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout

Page layout

Page layout is the part of graphic design that deals in the arrangement and style treatment of elements on a page.- History and development :...

 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

International Typographic Style

The International Typographic Style, also known as the Swiss Style, is a graphic design style developed in Switzerland in the 1950s that emphasizes cleanliness, readability and objectivity. Hallmarks of the style are asymmetric layouts, use of a grid, sans-serif typefaces like Akzidenz Grotesk, and...

. 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 modern 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

HTML

HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....

 and CSS

CSS

-Computing:*Cascading Style Sheets, a language used to describe the style of document presentations in web development*Central Structure Store in the PHIGS 3D API*Closed source software, software that is not distributed with source code...

 had existed for a while before newer frameworks popularised the use of grid-based layouts.
Some examples of grid system frameworks are:

• 960 grid system
• 960 grid system in russian
• grid system generator
• Semantic
• Flexible CSS Grid with SASS

External links

• Design by grid Articles, Resources, Showcase, Tutorials
• The Grid System Looking at the technical aspect of grids in practice, with many resources.
• The 960 Grid System Helper Useful grid system plugin.