Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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?

share|improve this question

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.