From the course: Typography: Working with Grids

Creating grids with columns

From the course: Typography: Working with Grids

Start my 1-month free trial

Creating grids with columns

Grids are especially helpful with multi-designer projects such as magazines and websites, where the format needs to remain consistent over multiple issues or time spans. Grids composed of multiple columns work in print-based projects including books, magazines, and newspapers, and on websites, tablets, and mobile devices. Columns are text containers. They do the heavy lifting in conveying the content in all of your projects. Even a two-column page of text can be made more lively by breaking through the grid with a call-out or a bit of illustration. Or, it can provide some entry points with inset drop caps, color, or subheads. This text-dominant three-column grid has outlines around each ragged right text column, which helps give columns a crisp edge. And there are several entry points provided including color panels, headlines and subheads, and inset drop caps. It looks very structured which is appropriate for the serious subject matter. Here's a slightly less structured spread with a three-column grid on the left-hand page. It has a smaller column to the left which is used for the bold, call-out text, that helps give some airiness to the page. Facing it is another text-heavy page set in two justified columns, with a column of space to the left. This time the space is used for the diagonal stroke of the giant slab serif initial A, which reads into the bold headline. I want to point out that there is no imagery on this page, the design only uses type, yet it is dynamic and inviting. The dramatic typographic scale and the typographic variety are a wonderful example of how type can serve as both content and image. Here's another page of all text which is handsomely designed and more importantly, which operates as efficiently as a Venus flytrap to entice the reader in. Grid starts out with a full-page width single column for the headline and deck, a two-column wide intro paragraph, and the continuation of the text in three columns. Notice how the point size of the texts starts large and gets smaller as the reader moves through the text. Check out the bold caps lead-in sentence in the intro paragraph, which also helps to pull the reader in. This six-column sidebar sits on top of a three-column story continuation. Different widths of column grids on a page can help vary the reader's experience by enlivening the content. In another example of a three-column format used across a spread, the first column on the second page continues the three-column grid. And the fourth and fifth column areas are split into a narrow column of marginalia relating to the main story, plus a sidebar. Notice another grid at the top of the sidebar. It has five images with captions, so a grid can be a container for continuous text, as well as a container for other grid structures nesting within the primary grid. Try some of these columnar grid structures out. Once you get going using columns, you will see your grids can be divvied up in any number of ways. Grids need not be limiting at all. In fact, they can open the door to your creativity.

Contents