Whether its 960grid or Fluid or 9/12/16/20 column grid systems...they all factor in vertical spacing but never horizontal spacing. Granted we view sites top-to-bottom so we don't necessarily design for limited height, but I'd still like to know how to reliably apply proper horizontal spacing as well to compliment a vertically-sound design. What resources are available for horizontal grids?

  • You mean horizontal gutters/vertical spacing? Commented Feb 28, 2011 at 16:23

3 Answers 3


As you said, sites are generally viewed in a vertical fashion, which is why the focus is on the grid systems that are popular today.

The problem with horizontal spacing is that you're limited as to what you can really control. Browsers allow users to easily zoom in/out, to make text and other elements larger. When that happens, the content will stay within the grid system that has been configured, but grow in height down the page.

  • So the only thing I've seen online is that horizontal gutters should obey the same size as vertical gutters, but that doesn't offer any practical advice. What I'm looking for is, I have a x-numbered grid. How do I apply horizontal padding/margins in conjunction with things like line-height so there is as much horizontal harmony as there is vertical?
    – acconrad
    Commented Feb 28, 2011 at 20:46
  • I'm not sure that I'm understanding exactly what you're going for. Line-height is just the space between lines of text (generally). Determining what would be appropriate really depends on the rest of your spacing. It sounds like what you're really looking for is appropriate spacing between elements such as header->paragraph, or spacing between content articles, etc. Is that accurate?
    – SubTypical
    Commented Mar 1, 2011 at 14:41

Web design grids focus on vertical grids because of the nature of browser rendering. The content is not known, nor the text size, and so the space consumed by arbitrary text is unknown. This is handled in browser rendering by flowing the text, first to the right, and when the right-hand end of the container is reached, vertically downwards to a new line. This means the vertical direction is the one that has to be flexible and unconstrained. You can't constrain both dimensions unless you know what every pixel will be, in which case you can just send an image with the exact layout you want instead of html text.


Try baselining your text. This will give it a really nice vertical rhythm which, in conjunction with the grid system, should give you pretty much what you are looking for.

Here are a couple of links to get you started:

http://baselinecss.com/ http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/ http://www.smashingmagazine.com/2008/04/23/5-principles-and-ideas-of-setting-type-on-the-web/

Just as an update: Smashing Magazine have a post containing a lot of information on Typography on the web and there is info there about Vertical rhythm and baseline grids

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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