Gutters - Padding and Margin for Columns with Background or Border

Question

What are the recommended design guidelines for gutters when a column (or box, or any layout module) has its shape clearly visible because it has its own background or border?

Typically one would put some space in between the box's edge and its text. But where to conjure this space from? By expanding the box, or shrinking the text?

To illustrate, here are some (but not all) options...

(Also, I could've used any grid with any number of columns, and any widths - this only serves as an example -- the actual question could be asked every time a layout straddles gutters.)

I've gone through a pile of writing on grid based layouts, but so far I've seen just one that addresses the matter: Nudge Your Elements by Khoi Vinh.

What am I missing? Or is there simply no clear guideline?

Since one of the motivations for grid based layouts is to heighten the sense of global alignment, I suppose one could argue the decision depends on what demands more alignment; the box, or its contents?

Unless I'm misreading, Khoi Vinh argues for option 3 in his article.

I find myself go back and forth between option 3 and option 6. With option 3 the box is aligned, but its text feels cramped. But using option 6, one ends up with neither box nor text aligned (though one might say the implicit middle between text-edge and box-border is the 'thing' that is now aligned).

Stepping beyond the web, none of my reading on book design and the canons of page construction talks about this issue either. I can see how the canons work for the vast majority of 'black letter on clear background' book printing, but the minute one adds color to a page layout (or inverts a black-and-white scheme), the gutter question comes back.

Mmm, I guess the question is; are there any guidelines for choosing between the options I illustrated - or have I ventured beyond designer law and is the matter just about 'what looks and feels good'?

Answer 1

Any time you use a grid, you must use it consistently except where you have one element (usually no more than one on a given page) violate it for a good reason -- to make it stand out or to change the mood of the page. Contrast must be bold and clearly deliberate in order to make this work. (By "work" I mean that it doesn't look like a mistake.)

A grid, strictly followed, is at peace. There is little if any tension; things show up where the eye expects them to be, and the reader is never startled or made to feel uncomfortable.

In this case, if your background violates the grid by a little bit, as in #4, it looks like a mistake. It's awkward. The complete lack of gutter crowds the box up against the other columns. Against the open leading of the text, which sets an expectation of openness, this is clearly just wrong.

0 provides no contrast, so that the second column is undifferentiated from the rest. In some circumstances that's what you want.

The "half-gutter" examples in #5 and #6 redefine the gutter, making it narrower. They actually redefine the entire grid horizontally and vertically, because in this case the gutter ends up being exactly the same as the line spacing. That's bad for text by itself, but can work with the box. In #6, though, you have disproportionate white space on either side of the text compared to the top and bottom. That's awkward and uncomfortable because it makes no sense. #5 would be preferable, because the white space is more evenly distributed. For the same reason, #3 is preferable to #2.

Overall, then, I would agree with Lauren and recommend #3 as your best shot. It is also the best general case, regardless of number of columns.

There are rules. They can certainly be broken if you have a good reason, but any time you do so must be purposeful, bold and clearly "as designed." Helvetica Black paired with Georgia works because they are different; Trebuchet paired with Verdana grates on the nerves because they aren't different enough. A big, square, red box that spans one and a half columns could work; a slightly-off grey one will not.

Answer 2

I vote for Option 3. The edges of the gray box are what define the column vertically, so those lines can't be violated (without a reason). The gutters should be the same for all three columns, so inset the text inside the gray box. Option 2's inset is a little too deep.

That's what I'm accustomed to doing in print, so it looks "right" on the web as well.

Answer 3

If this is for web design, I would highly recommend against using any padding in the horizontal direction if you are concerned with cross-browser consistency. Different browsers treat divs and padding differently enough that presentation can break.

Whichever way you go, only use margin horizontally. It make require adding a class or two to get the exact layout you want(for instance one set of margins for the div and another for the paragraph), but in the long run, it's more dependable. Vertical padding is generally not a problem, though.