Typography: Grids and Hiearchy

A grid is simply one way to make things… simple. It’s a network of guidelines and reference points “that serve as a guide for distributing elements across a format.” Essentially, grids bring together all the different components of a piece to “communicate a coherent message.” A coherent message is what designers strive for. Grids do this by breaking down complexities, such as “lay[ing] out enormous amounts of information,” and allowing collaboration “without compromising established visual qualities.”

One type of grid system is the modular grid. This implements the use of horizontal and vertical lines to create a rigid structure of rows and columns. In a modular grid you could find:

· Columns: vertical alignments of type that create horizontal divisions between the margins.

· Margins: the negative spaces between the format edge and the content, which surround and define the live area where type and images are arranged. Margins can be used to focus attention, serve as a resting place for the eye, or at as an area for subordinate information.

· Modules: individual units of space separated by regular intervals that, when repeated across the page format, create columns and rows.

· Flowlines: alignments that break the space into horizontal bands. Flowlines help guide the eye across the format and can be used to impose additional stopping and starting points for text or images.

· Gutter: white space between facing pages.

Besides grids, another way designers can develop a coherent message is through hierarchy. This is the idea that “information must be given [in] an order that allows the viewer to enter the typographic space and navigate it.” It’s based on levels of importance within the text and ultimately creates an effect where “different parts of a text … changes their color and rhythm in the layout.”

Clear hierarchy can be attained a few different ways. One aspect is through distinguishing space and scale. The way a designer groups and aligns items “establishes a sense of regularity to them.” By scaling elements larger, they can “appear to advance in space.” Likewise, smaller elements appear to recede into space. This scale change also generates contrast in light and dark, tension and stasis through typographic color. Typographic color is the “changes in weight, texture or value, and rhythm [that] signify differences between elements.” Components that appear to advance grab a viewer’s attention and therefore occupy the top level of the hierarchy. Less active components decrease in importance and are usually smaller or lighter and recede.