Determining Gutter Size in Grid Design


Is there a rule of thumb for determining grid gutter size as it relates to type size?

I'm struggling with this issue on the web, especially when dealing with larger size type set at 20px and above. It seems that with larger type, the 20px gutter is barely enough to create space among different columns, maybe the solution is to increase padding as opposed to the gutter?

7/4/2012 8:04:00 PM

I find basing layout measurements on line-height (or leading, for print design) gives better results than using whatever number you've set the font size.

Depending on your typeface's proportions and the way the font was created, the actual rendered glyphs are going to have only a loose relationship to the number designating that font size. As such, if you base your whole layout on one font's measurements, it can look odd if you later decide to change the font or add another one to the mix.

On the other hand, a baseline is always the same size regardless of what typeface you're using, and in my opinion it is a much stronger visual rhythm than the nebulous em size. One line-height increment gives a good starting point for gutter width in web design, and if it still looks too crowded just double it. As always, though, trust your eyes over the numbers.

11/2/2012 10:35:00 PM