Anatomy of a Modular Typographic Grid

Recently I’ve been trying to expand my knowledge and skills working with typographic grids. On the knowledge side I sought out definitions for the different parts of a grid, specifically a modular grid.

I couldn’t find much online and turned to some of the books I have instead. I assume other people have had the same trouble searching and thought it might be helpful if this information was more readily available online.

Most of the information in this post comes from Timothy Samara’s book Making and Breaking the Grid.

Anatomy of a Grid

Grids act as guides for the placement of elements in a design. No matter how simple or complex, grids share some common parts, each fulfilling a specific function. Not every one of these parts needs to be present in every grid.

A little further down the page I’ve added an image showing these common grid parts, which you hopefully find helpful as you read through their descriptions below.

Format

The format is the area in which the design sits. In a book or magazine the format is the page. On a website the format is the browser window.

The format defines the live area of a design where type, images, and other media are present.

Margins

Margins are the negative space between the edge of the format and the outer edge of the content.

The proportions of margin help to establish the overall tension (or lack of tension) in a composition. The smaller the margin the more tension is created.

Larger margins create more whitespace and help focus attention on the positive space of the design. Larger margins also help the eye find a place to rest and can be a good area to place subordinate information.

Flowlines

Flowlines are horizontal lines that break the space into horizontal bands. They can be used to help guide the eye across the page and can be used to impose starting and stopping points for text and images to be aligned.

When elements are aligned to the top of a flowline it’s called a hangline as the elements appear to hang from the line.

Type is often aligned to a series of flowlines equally spaced down the page called baselines. The base of the type sits on the line, hence the term. Aligning type to a baseline can help establish a vertical rhythm in a design.

Modules

Modules are individual units of space that are separated by regular intervals. Modules are the basic building blocks of grids. When repeated they create columns and rows.

Ideally the width of a module will be based on the measure of a line of text. The height would be based on some multiple of the type’s leading or line-height.

The upper left corner of a module is considered to be the active corner and the lower right corner, the passive corner.

Spatial Zones

Spatial zones are fields of adjacent modules. Each field can be assigned a specific function within the design.

A long horizontal field might be used to place long horizontal images. A long vertical field might be used for long blocks of text. A large rectangular field might be used for video.

Design elements will often be placed inside a field or spatial zone as opposed to a single module.

Columns

Columns are vertical bands of modules. There can be any number of columns in a grid. More columns leads to more flexibility, but can also make the grid difficult to work with.

Column widths can be equal or they can vary across a grid.

Rows

Rows are the horizontal equivalent of columns. Online it’s harder to plan for rows as the height of the format is often inconsistent and dynamic.

On some pages your design may call for a fixed height, though on most pages your design is allowed grow vertically with the content.

Gutters

Gutters are the spaces separating modules either vertically or horizontally. Typically we think of gutters as the space between columns, but they are also the space between rows.

The minimum width or height of gutters should be an ’em’ though this should usually be larger to better separate columns from columns and rows from and rows. The height of horizontal gutters should be based on the leading or line-height of the type.

Folio

Folios are created when page numbers are placed consistently in the margin, usually above or below the composition.

Running Header or Footer

A running header is a guide at the top to indicate your position in a manuscript. You’d find information like title, chapter title, section title, author, etc located here. A running footer is then this information is placed at the bottom of the format.

Markers

Markers are placement indicators for subordinate or consistently appearing information. Markers can be used to denote the location of folios, page numbers, etc.

These last 3 are more commonly found as described in print, but there’s no reason they couldn’t also be used on a website.

For example blog posts aren’t usually given page numbers, but they often display the publication date. When present the date is usually shown at the top of the post, but there’s no reason it couldn’t be included in a running header or as a substitute for the page numbers of a folio.

Summary

As more and more web designers are looking to employ grids on the sites they design it makes sense for us to learn the language of grids in order to better understand them and to better talk to each other about them.

When many people talk about grids online there’s often a focus on columns and to a lesser extent baselines. There are more parts to grids though than columns and baselines.

Hopefully the diagram above along with the definitions in this post will give you a foundation for the common language of grids to help you further understand explore using grids in your own work.

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.