: 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

@Jennifer810

I usually use two Capital MMs as the correct width. Another rules is no smaller than 1.618 x point size of the font you are using (golden ratio), increasing space depending upon the “heaviness or contrast” of the typeface you are using.

Vote Up Vote Down

@Ravi4787994

Use a flexible grid with about double the columns you think you'll use at any given time. These additional narrow columns can become buffer for large display type.

The alternative is a little less strict but can produce good results. Think of your gutters like you think of line heights: in units. If your base gutter is 12, the next step might be 18 or 24.

You can also employ units with padding as you mentioned. To keep a well organized grid, you can set the type in some kind of container that adheres to the base grid with the type inset by a unit or two or three.

Vote Up Vote Down

@Courtney577

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.

Vote Up Vote Down

@Deb5748823

Gutter will tend to involve the divs text is contained in I.E. the twitter bootstrap. Padding can easily fix columns that are too close to one another. White space between columns (a good design principal to adhere to with all site elements) will improve readability.

In reality exactly how much space is rather subjective for you as a designer. Use enough that your eye feels comfortable. Design is in this instance without hard fast rules though web design tuts had a video on typography and readability from a developer's conference that may aid you in choosing how to display your site.

Here is the video. webdesign.tutsplus.com/articles/typography-articles/weekend-presentation-jason-santa-maria-on-web-typography/

Vote Up Vote Down