Grid (page layout)


Grid (page layout)

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 “Villard’s diagram,” was in use at least since mediaeval 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 modern web design

Web developers have only recently started to show a real interest in grid systems. Why it has taken so many years for web developers to become interested in something that has been essential to the written medium in general since the 30s, is hard to say - the technology, namely HTML and CSS, has been around for a while, but has only recently been applied to the implementation of grid-based layout systems for web pages.

* "Designer [http://www.markboulton.co.uk/ Mark Boulton] " has written a [http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/ tutorial] on the subject of grid use in web design.

* "New York Times" design director Khoi Vinh used the typographic grid in the design of that publication's online version, and wrote [http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php an article] about the process.

* A simple framework called [http://code.google.com/p/blueprintcss/ Blueprint] has been developed, for implementation of grid-based layout in web pages.

* Another simple CSS grid framework is the [http://960.gs/ 960 Grid System] by Nathan Smith, who explains the rationale behind it on his [http://sonspring.com/journal/960-grid-system blog] .

* " [http://grid.mindplay.dk/ Grid Designer] " is a visual grid and typography design tool that works in most standard web browsers.

* An [http://www.aisleone.net/?p=301/ article] by graphic designer [http://www.yearofthesheep.com/ Antonio Carusone] on how to design grid systems for Flash.

* A Photoshop file which serves as a [http://www.designinginteractive.com/design/sharing-the-grid/ starting point for grid-based web design]

ee also

* Canons of page construction

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." 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 Newpapers, 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 3721201450
*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. [http://www.subtraction.com/archives/2007/0318_oh_yeeaahh.php]
*Antonio Carusone, "Designing Grid Systems For Flash". [http://www.aisleone.net/?p=301]

External links

* [http://www.designbygrid.com/ Design by grid] Articles, Resources, Showcase, Tutorials


Wikimedia Foundation. 2010.

Look at other dictionaries:

  • Page layout — is the part of graphic design that deals in the arrangement and style treatment of elements (content) on a page. Beginning from early illuminated pages in hand copied books of the Middle Ages and proceeding down to intricate modern magazine and… …   Wikipedia

  • Page (paper) — A page is one side of a leaf of paper. It can be used as a measurement of documenting or recording quantity ( that topic covers twelve pages ).The page in typographyIn a book, the on the left side is called the verso page and the page on the… …   Wikipedia

  • Canons of page construction — The canons of page construction are a set of principles in the field of book design used to describe the ways that page proportions, margins and type areas (print spaces) of books are constructed. The notion of canons, or laws of form, of book… …   Wikipedia

  • Comparison of layout engines (Cascading Style Sheets) — Cascading Style Sheets CSS Animations Dynamic CSS Comparison of layout engines Comparison of stylesheet languages Internet Explorer box model bug CSS Zen Garden The Zen of CSS Design CSSTidy Style sheet Tableless web design Holy Grail (web… …   Wikipedia

  • Street layout of Seattle — The street layout of Seattle is based on a series of disjointed grid patterns. Street grid layout Most streets in Seattle run either north south or east west, except in the old town. The old town of Seattle is bounded by Elliott Bay on the west,… …   Wikipedia

  • Milton Keynes grid road system — A typical single carriageway grid road, H4 Dansteed Way, looking east from Two Mile Ash. Note the tree lining, the redway cyclepath and the staggered junction for local roads. The Milton Keynes grid road system is a network of national speed… …   Wikipedia

  • Trident (layout engine) — Trident Developer(s) Microsoft Written in C++[1] Operating system Microsoft Windows: Windows XP to 7 (supported …   Wikipedia

  • In the Grid — Infobox Television show name = In the Grid caption = genre = Game show runtime = 30mins (inc. comms) creator = Endemol UK starring = Les Dennis network = Five country = UK first aired = October 30, 2006 last aired = present num episodes = 70… …   Wikipedia

  • Watchmen — This article is about the comic book limited series. For the live action adaptation, see Watchmen (film). For other uses, see Watchman (disambiguation). Watchmen Cover art for the 1987 U.S. (left) and 1995 U.S./UK/Canada (right) collected… …   Wikipedia

  • graphic design — the art or profession of visual communication that combines images, words, and ideas to convey information to an audience, esp. to produce a specific effect. * * * The art and profession of selecting and arranging visual elements such as… …   Universalium


Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”

We are using cookies for the best presentation of our site. Continuing to use this site, you agree with this.