Why Use a Grid?

As a designer, it is paramount to organize and present information to the reader in its clearest and most meaningful way. By establishing a hierarchy of information within the visual proportions of a page, a reader can more easily understand the message.

Using contrast in size and weight are good ways to do this, but spatial manipulation (proximity and alignment) on the page offer the best and most versatile way to organize information.

What is a Grid?

A grid is a series of horizontal and vertical lines that sub-divide a page into smaller areas. (A ‘page’ does not have to be a printed page. Grids are used in a website design and computer-based applications.)

See: Thinking With Type: Grids

Grids can be derived solely by mathematics, allowing equations and ratios to determine proportion, or a combination of simple division of the overall page dimensions customized for solving the problem at hand.

Investigate: The Golden Ratio a.k.a. The Golden Mean

Regardless of how it is devised, a typographic grid organizes text and images across the pages of a document. A grid can consist of a single column framed by margins, or it may have multiple columns and rows.

Using a Grid to Organize & Compose

Like any other two-dimensional composition, a grid should accommodate or create a focal point.

The focal point does not necessarily need to be the biggest nor the ‘heaviest’ element on the page, but working within a grid and using design fundamentals, the focal point will be the primary “eye magnet” of the page and accordingly, should be at the top of your informational hierarchy.

Once a grid is developed, create a hierarchy of elements to guide the viewer through your layout, from major to minor sections. For example, beginning with the headline as a focal point, perhaps the viewer will be led to a subhead, a pull quote, a logo, then the body copy.

Form Follows after Function

Typography, and the grids it inhabits are made to communicate clearer. Better readability and understanding of the text is the goal of using a grid.

Using a grid system for page and screen layout makes it easy to organize and balance all of your elements. Graphics, text, photos, page numbers, anything that is going to be visible on a printed or web page can be organized using a grid. Grid systems have been in use for a long time and are strictly adhered to in the magazine and newspaper publishing industry, but graphic designers use them for all types of printed and on-screen media. Anyone who creates documents or screen designs should implement a process with a grid in mind to make a visually pleasing, balanced, and readable layout.

More than the Total of its Parts

A carefully crafted grid will facilitate the mind’s attempt to create order from chaos, and a sense of space (even in some cases, alluding to a 3-D space), by providing a structural system to which the reader’s logic relates.

A successful grid addresses the information appearing on the page, and creates a meaningful and visually pleasing layout. Gestalt principals are attained with first and foremost; a sensitivity to the division and organization of the information – thereby organizing the overall grid in a spatial, proportional, and balanced composition.

An established hierarchy will reveal the relative importance of one element/idea over another in a series of dominant, sub-dominant and subordinate relationships. By using the content and the message to dictate the grid, which thereby dictates the appearance.

The Culture of a Grid

When creating your hierarchy, consider the cultural habits of the viewer. For example in the United States viewers (readers) typically scan from left to right and top to bottom.

Consider: An Effort to Make Arabic Easier

Also remember that design solves problems. Never forget the medium you are working in, and how your readers (a culture, or sub-culture) will be viewing it.

Example: Newspapers Print vs. Online Editions

Swiss and Bauhaus

Swiss

Swiss design is most commonly known for its reductive approach towards forms, using geometric shapes as well as sans serif type and bold flat colors. This type of style developed soon after World War II, the same time modernism was becoming more and more of the normal aesthetic appeal.

Bauhaus

The style, Bauhaus, originated from an art and architecture school in Germany called Bauhaus. It existed between the years of 1919 and 1933. The word Bauhaus is a translation of “Architecture House” in German. The Bauhaus art school had a large influence on various developments in art, architecture, graphic design, interior design, industrial design, and typography.

Bauhaus is generally classified by its radically simplified forms, the rationality and functionality of the form itself, and the idea of mass production.

In-Class

Become familiar with Adobe InDesign to make grid-based layouts. Do the following exercise A printed and trimmed version is due at the start of next class. Print on the LaserJet. Trim to 8” square. You do not need to mount the finished piece.

Exercise: Grid Project

Text used in Grid Project: (Copy and Paste this text!...)
COMMON TYPOGRAPHIC DISEASES

Various forms of dysfunction appear among populations exposed to typography for long periods of time. Listed here are a number of frequently observed afflictions.

Typophilia

An excessive attachment to and fascination with the shape of letters, often to the exclusion of other interests and object choices. Typophiliacs usually die penniless and alone.

Typophobia

The irrational dislike of letterforms, often marked by a preference for icons, dingbats, and—in fatal cases—bullets and daggers. The fears of the typophobe can often be quieted (but not cured) by steady doses of Helvetica and Times Roman.

Typochondria

A persistent anxiety that one has selected the wrong typeface. This condition is often paired with okd (optical kerning disorder), the need to constantly adjust and readjust the spaces between letters.

Typothermia

The promiscuous refusal to make a lifelong commitment to a single typeface—or even to five or six, as some doctors recommend. The typothermiac is constantly tempted to test drive “hot” new fonts, often without a proper license.