gridsA guide, not a panacea

A grid is a sys­tem of hor­i­zon­tal and ver­ti­cal lines that can guide lay­out choices. Grids have been part of page lay­out since the Guten­berg Bible. The pages be­low use a grid of four ver­ti­cal and two hor­i­zon­tal lines.

In mod­er­a­tion, grids can be use­ful. But in the words of Dutch de­signer Wim Crouwel, “The grid is like the lines on a foot­ball field. You can play a great game in the grid or a lousy game.” The grid might be the start­ing point. But the eye must al­ways be the fi­nal judge.

Grids are help­ful when they en­cour­age con­sis­tency. They make it eas­ier to re­late el­e­ments on the page to ex­ist­ing ones (a prin­ci­ple sug­gested in max­ims of page lay­out). If your lay­out seems messy or aim­less, move el­e­ments onto the grid.

Grids are not help­ful when they cre­ate a false sense of se­cu­rity—I aligned every­thing to my grid, there­fore my lay­out is solid. For in­stance, a few years ago, web de­sign­ers were fix­ated on the 960 grid sys­tem. If it got peo­ple cu­ri­ous about grids, OK. But it also proved that if you take ugly shit and align it to a grid—it’s still ugly shit.

A few tips for us­ing grids effectively:

  1. Grids can guide po­si­tion­ing (= where an el­e­ment goes on a page), siz­ing (= the height and width of an el­e­ment), or align­ment (= how two el­e­ments re­late to each other). Grids can ap­ply to vis­i­ble el­e­ments (say, a text block) and in­vis­i­ble ones (say, page mar­gins, space be­tween para­graphs, or first-line in­dents).

  2. A coarser, sim­pler grid en­cour­ages more con­sis­tency, be­cause there are fewer ways to align items. A com­pli­cated grid, by con­trast, might as well be no grid at all.

  3. Grids don’t have to be rigid or sym­met­ric—in fact it’s usu­ally bet­ter if they’re not. For in­stance, in the Guten­berg spread above, the columns of text are the same height and width. But the mar­gins within each page are all different.

    Corol­lary: if you want to use math­e­mat­i­cal ra­tios to set up your grid, fine. But these ra­tios don’t guar­an­tee a good lay­out on their own. Rely on your eyes, not your calculator.

  4. A grid can emerge from ex­per­i­men­ta­tion rather than be­ing de­fined in ad­vance. For in­stance, all the sam­ple doc­u­ments are built around sim­ple grids. This is a con­se­quence of or­ga­niz­ing el­e­ments more con­sis­tently. But I don’t em­pha­size the grid-ness be­cause I want read­ers to fo­cus on ty­po­graphic con­sis­tency (which is the end goal), not grids per se (which are merely a means to that end).

  5. Not every­thing needs to go on the grid. For in­stance, with print or PDF projects, I of­ten start with a pica grid (one pica = 12 pts). I use this to de­rive a coarser grid that con­trols the po­si­tion and size of the text blocks. But if it turns out that a cer­tain set of in­dents look right at 2.5 pi­cas, I’m not go­ing to freak out.

by the way
  • A base­line grid is a spe­cial grid that re­stricts where the base­line of a line of text can ap­pear. These grids are typ­i­cally used in wide multi-col­umn lay­outs (imag­ine a news­pa­per page) where un­even base­lines would be dis­tract­ing. In book or web­site lay­outs, how­ever, I think base­line grids im­pose too much rigid­ity (and too much work) for too lit­tle ben­e­fit. I don’t use them.

  • Fans of math­e­mat­i­cal ra­tios in grids (also known as mod­u­lar scales) some­times com­pare them to mu­sic. For in­stance, Robert Bringhurst says “a mod­u­lar scale, like a mu­si­cal scale, is a pre­arranged set of har­mo­nious pro­por­tions”. (The El­e­ments of Ty­po­graphic Style, p. 166.)

    As a mu­si­cian, I find this metaphor in­com­plete. Sure, mu­sic is writ­ten on a grid of har­mony and rhythm. But per­form­ers don’t rigidly ad­here to these grids. In­deed, mu­sic that was locked per­fectly to a grid would sound ster­ile and bor­ing. Just as the per­former’s ear is the ul­ti­mate judge of the mu­sic, the ty­pog­ra­pher’s eye is the ul­ti­mate judge of the page.

undock move Heliotrope Equity Valkyrie Century Supra Concourse Triplicate buy font close