Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

My web designer tells me that in a web page, the empty margins or padding should always be multiples of a standard. For example 6 px, 12px, 18px. This should produce nicely balanced lay-outs. I would like to learn a little bit more about it:

Should one really not violate this at all?

Should the standard be the same horizontally and vertically?

share|improve this question
3  
I'm not proposing to close the question here, but graphic design SE is another good place to ask. –  Vitaly Mijiritsky Apr 20 '11 at 6:21
    
The reason for the bounty from me is I think this question is very interesting, and needs to be answered correctly. My answer is just one from my point of view. I think that there is more appropriate ones, taking full act on the complexity (like @Coswyn). –  Benny Skogberg Apr 25 '11 at 9:16
    
"empty margins or padding should always be multiples of a standard" (emphasis mine) - usage of the word "always" is a pretty good indicator of a false statement, because absolute statements are always false. –  zzzzBov Jul 25 '12 at 17:38
add comment

8 Answers 8

  • The best learning resource for this would be a good introduction on typography – probably the seminal classic by Bringhurst (see http://webtypography.net for a good roundup applied to the web), though e. g. Spiekermann's ‘Stop Stealing Sheep…’ is not bad for starters, either – and on design grids (see my answer here on UXexchange).

  • When designing grids you are mostly using a basic module (proportions ideally defined by working from the content outwards) that all content is fitted to (i.e. multiples of it).

  • Vertical and horizontal margins between blocks are in most cases different. Vertical whitespace is often oriented on the baseline grid (see e.g. Bringhurst, again). Using one is highly recommended to achieve at a unifying vertical rhythm.

  • The minimum amount of horizontal whitespace, i. e. primarily the separation between columns of body text (gutter), is governed by Gestalt psychology with font size, line spacing, and line width as main influencing factors. You should place text blocks far enough from another such that your recipients will be able to see them as distinct units of their own. A traditional rule of thumb would make the gutter at least 1.5 ems wide in order to appear significantly wider than any possible whitespace within a line of text. On the screen, good line spacing tends to be a little bit wider than in traditional print, though. Hence you will probably need a little bit more than that. Using the same value as your baseline grid is a good guess to start with in most cases.

  • BTW: design standards – unless significantly backed up by ergonomics or cognitive psychology – are never standards in the more rigid sense of the word. You may violate any ‘standard’ as long as you know why you are doing it.

share|improve this answer
add comment

I do not believe there are any 'rules' to design, only principals; congruence and proportion are key principals of design, wherein any principal can be disregarded.

Your margins can be whatever you decide is aesthetically best, but should you choose to be mindful of "best practices," you will most likely make that decision based in an adherence to effective use of proportions, consistency and purpose.

Art is not formulaic--if every website had margins and banner sizes perfectly matched to 'strict rules,' and 'the best grid,' the originality (and overall impact) of that web design would suffer greatly.

Using 6px or 12px margins throughout your site is no different than 7px and 29px margins--just have a reason for your choice, and stick to it rationally. The people who say your margins need to be "perfect golden ratios of this containers width" are, in my opinion, losing sight of the creative aspect of web design--they also tend to be the designers who make cookie cutter websites... albeit potentially nice looking cookie cutter websites :)

Whether to use em over px is another story--and will require your own discretion. Fluid websites aren't always the best solution; it wouldn't be a bad habit to get used to using em's though (and maybe leaving yourself a reminder)--eg.

.myclass {
     color : #333;
     font-size : 1.125em /* 18px at default */
}
share|improve this answer
    
It is a common misunderstanding that px was not a relative measure. But according to the W3C it is and meanwhile even MSIE behaves accordingly. Consequently, the former main argument for preferring em*s over *px has become obsolete and a mere matter of personal taste as both get scaled properly. You might even prefer px now due to browser rounding errors when dealing with the float values necessary for working with *em*s. –  Sascha Brossmann Apr 26 '11 at 7:09
    
Oh, and while I basically highly agree with your ‘no rules’ notion, there are some very basic ones governing visual perception, nonetheless. Hint: cognitive psychology :-) Not that these could not be creatively employed… –  Sascha Brossmann Apr 26 '11 at 7:14
    
@Sascha - I was under the impression that em responded to user defined stylesheet font sizes, so that it scaled with respects to their input... not just the zoom feature of browsers--that's been scaling properly with px since I can remember. –  J.L. Makes Apr 26 '11 at 9:13
    
@Sascha - If you mean along the lines of the Gestalt Principal, then yes--there are explicitly defined behaviors of visual perception... but doesn't cognitive psychology explore visual perception in a reactionary way? I have yet to learn of a definitive rule to make something "look good," other than maybe the use of patterns and a grid over arbitrary shapes and placement; I may be a hopeless romantic for art, lol. –  J.L. Makes Apr 26 '11 at 9:17
add comment

Consider using a grid layout where your margins are also given by that grid. I tend to use the 960 Grid System but there are many more that other swear by.

For me the benefit of this is largely from choosing something once that works and then not having to spend time thinking about it every time something needs to be laid out.

share|improve this answer
    
You should IMHO not mistake the technical implementation of the grid (i.e. the main reason for using a CSS framework) with the underlying design. The default values in 960gs, Blueprint etc. are exactly that: defaults, i.e. tolerable guesses to start from. But they do not release you from making a design decision that might be better suited to your content. All those frameworks are quite well adaptable to different grid setups (see the countless grid generators for them on the web). –  Sascha Brossmann Apr 26 '11 at 7:28
1  
I think we differ here on the design side. Giving endless options to make each page as good as it could be in isolation of the others is not something that I believe makes a good UX. Consistency is far more valuable for me. I will however agree that one shouldn't stick exactly to a chosen grid even at the detriment of the page. –  JohnGB Apr 26 '11 at 9:59
    
There is value in consistency of a grid framework. The example of 960 is very valuable - people are used to that width and designers are used to working with it. Consistency is part of usability. –  Chris Kluis Apr 26 '11 at 10:39
    
ahem… where did I state that you should design ‘pages’ in isolation of each other? I had hoped that it was clear that my statement applied to designing a system :-) But the design of a good grid system always should be guided by the content it shall be supporting. –  Sascha Brossmann May 9 '11 at 23:01
    
@Chris In just one word: fail. (SCNR) –  Sascha Brossmann May 9 '11 at 23:12
add comment

It's better to use relative values - "em"s or percents, because margin looks good only in specific width/height ratio.

Relative sizes are useful even in fixed layouts, because when you need it to shrink/widen a little, you have to change it only in one place.

So the answer is: Do not use pixels, use "em"s for margins as well as box sizes, and it IMHO should be between 0.5em to 2em - depending on visual experience.

And ratio between vertical and horizontal margin depends on overall "vertical&horizontal" rhythm (google).

share|improve this answer
    
To be clear: 1em = font-size, 2em = 2 * font-size etc. Therefore: if h1 and p both have margin of 0.5em, and h1 has 20px and p 12px font-size, then heading's margin is translated to 10px and the paragraph's to 6px. –  koiyu Apr 24 '11 at 11:37
    
But layout proportions do not scale in an optically linear manner as the perceived visual ‘blackness’ of the content varies when scaled (at least where type is concerned). Therefore, using relative units does not help that much in that respect, IMHO. –  Sascha Brossmann Apr 25 '11 at 22:45
add comment

This site's layout is a good example of how a combination of adherence to multiple patterns yields balanced proportions and an overall consistent structure. The logo, for example, is spaced approximately 14px at the top and bottom within its header segment though it's indented 18px from the edge of the question header, making the top and bottom spacing approximately 30% smaller than the left side - other elements within the header are spaced similarly. On the other hand, the spacing of the text within the question header is approximately 9px on the bottom, 13px on the top, and 24px on the left side. That sets the top spacing to be approximately 50% smaller than the left side, and the discrepancy in the bottom is relative to the alignment of the text to the bottom of the main header in addition to it being header text (separated from the main content with a divider, though closer to that content which it more closely relates to than anything else that surrounds it).

Proportions vary and are an art in themselves. There is a math to it all, but bringing a complex structure together is, in practice, a generally intuitive process.

I'm sure there are multiple books and online resources that touch on this, and they are all likely helpful in their own ways, but my best advice is to be an avid observer of proportions in the things around you - in themselves and relative to their environments and other things in that environment - especially in nature. In time you will hone your intuition and begin to more naturally imitate those proportions and apply them in their appropriate settings.

share|improve this answer
add comment

You should have consistency yes - but if the page is not user focused what good are multiple standard margins/padding anyways. I try and use multiples of 5 personally as it is faster to equate.

share|improve this answer
add comment

It can be helpful to have standard spacing within content sections. IE paragraphs, headings and lists should all have the same amount of spacing below them as that creates rhythm. The rule of thumb though is to maintain balance and consistency.

share|improve this answer
add comment

Yes... and no. What your designer might refer to is proximity through grouping. The white spaces (in your case margins) separates different groups of elements from each other.

More on the topic: Grouping Elements for Clear Web Page Design

share|improve this answer
add comment

Your Answer

 
discard

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.