{Carrer web log} ←

O rule + golden proportion for calculating the gutter in the grid

Wednesday, May 27, 2009 { 12 Comments }

What is Gutter in Grid Design?

Gutter is the blank space that separates rows and columns in screen. Almost every web site is made of more than one column. The space between those columns is called “the gutter”.



So why is the size of the gutter important in web design or design in general?

I think that the space between the columns is extremely important and it can contribute for better reading, more elegant design and the harmony between grids (columns).

We (me included) almost every time ignore the gutter size. Usually we put 10px without thinking or if you have more designer “taste” you will try to adjust it manually and stop when “looks good”.

There is practically no (or very little) documentation about this problem on the web or in many typography or grid design books.

So I tried to resolve this problem.

First logical thing is that the size of the gutter should be bigger than one blank space of one letter. So the eye won’t jump to the next column.
But this space shouldn’t be too large to create the sensation of “empty hole” between grids.

I often ask myself why the site The Grid System looks so damn good. I keep turning back just to enjoy the view. I also love BBC and NY Times.

Every time when I tried to find the formula for the perfect gutter I finished with dead end. But last week when I made some experiments with the leading for Better Web Readability Project I find out that the perfect leading for my 16px gridlines was 1.625 very close to the golden proportion 1.618. I must say in the past I was very skeptic about this number.

Now I think inside that number is hidden the mathematical formula for beauty.

So I wanted to take the horizontal size of one letter and multiply the golden proportion. So what lowercase letter can we take that can represent all the letters? I think that the letter ”o” has the optimal form and is the best letter for this experiment.

Attention! Not all fonts have the same letter “o”. Different fonts have different horizontal size. Let’s try with Arial and calculate how many horizontal pixels it has.

This is the letter “o” 12px Arial zoomed 3200% so if you count the colored pixels you can see that are 8. So the horizontal size is 8px multiplied with 1,618 equals 12,944 or 13px.




So if you have 12px Arial the best size for the gutter is 13px. But this is just for Arial. For Lucida sans Unicode the size of the o is 9px so the gutter is 9 X 1,618 = 14,562 so you can choose between 14 or 15 px.

If you have bigger font you will have more pixel and bigger gutter.

All the sites I named before almost perfectly match this calculation. They all have beautiful grid system.

I called this rule O-rule.

Nota: The image of gutter is taken from Mark Boulton book "Designing
for the Web"

12 Responses to “O rule + golden proportion for calculating the gutter in the grid”

1. //  Anonymous // 5/27/2009

   I've been using the Fibonacci series for the last 10 years for margins, page dimensions, and especially for font sizes. I've always loved the clean classical look that it gives.  

2. //  yotoon! // 5/28/2009

   Thanks for sharing. I'll try to implement this in one of my designs and see how it feels. :)  

3. //  Unknown // 6/08/2009

   Sounds like a good tip.
   
   The only thing I don't get is why you use the o. To make the o fit in nicely with the rest of the letters it usually extends just below the baseline and above the x-height. Therefore it's slightly larger than a normal lowercase letter without extenders.
   
   Wouldn't it be better to take the height of the x instead?  

4. //  Vladimir // 6/08/2009

   @Mattijs:My main goal was to calculate the vertical gutter, who in my personal opinion can be different from the horizontal gutter. So I took the width of the letter "o" like most Optimal.That was my personal decision. I think that the letter "o" or "the closed line" is one of the simplest and most natural forms.  

5. //  Camilo Oliveira // 6/11/2009

   Vladimir, what about try this with letter 'm' as we already use in CSS with em´s?
   
   Btw, great post. I thought about this subject last week, your post explained it all very good.
   
   Cheers from Brazil
   Camilo  

6. //  johnjohn // 6/17/2009

   i presume i can measure the width of 'o' in any unit i like and multiply by golden ratio yes?
   
   my grids are for print not web so i measure width of 'o' in mm
   i.e. 'o' at 24pt = xmm
   xmm by 1.618 = correct size gutter (1.618xmm)
   
   tada?!  

7. //  Anonymous // 6/23/2009

   I'm confused about the usage of "vertical". You say vertical size, then measure from left to right? Width means a horizontal extent, doesn't it?  

8. //  Vladimir // 6/23/2009

   @Anonymous: Ha,ha you are absolutely right! Is not vertical is horizontal I'll change it wright now. What was I thinking. Thanks!  

9. //  Unknown // 10/07/2009

   How have you measured 8px of letter "o" width at 12px Arial? Which anti-alias/font-smoothing are you using in your editor/system, because I couldn't simple get this size. My "o" has only 6-7px wide, so 12px Arial gives gutter width of 11px. In my opinion visually to far too narrow. And btw. www.thegridsystem.orguses Helvetica at 12px, "o" size around 6-7px, and gutter of around 16px. So I don't see here any 1,618 ratio.
   
   I also use Golden Ratio in my designs... That's why I tried your tip and couldn't find, what you described here.  

10. //  Vladimir // 1/09/2010

    @erich:Sorry about the delayed answer, but I sow you comment today. I actually used Paint.Net which can zoom up to 3200% so you if you used Photoshop you have obtained different results.All fonts are in vector format so all depends on pixel rendering engine behind the program. Same thing is also in web browsers all browsers have different font rendering engines that is why the same type looks differently in different browsers.  

11. //  Anonymous // 1/18/2010

    Nice dispatch and this post helped me alot in my college assignement. Say thank you you on your information.  

12. //  Anonymous // 4/17/2010

    It's actually quite amazing the things that can be done with math and design, how some as simple as a clean grid can help beautify some thing completely boring, I've used many things like the first person said I've used the Fibonacci sequence, along with grids and layouts like the Occult Center, which is a gorgeous grid system, and many more theres a lot of information about math an design, relating to all forms here Golden Number I've taken a course on how to use a lot of these methods, and it's quite astonishing especially when you date it back and do some geometric analysis on some of the great artist and you see how people used this even before there was electricity  

Post a Comment

<< Home