Best Practices for Vertical Grids

[Greg]

How many of you use vertical grids when designing? http://www.alistapart.com/articles/se...

Just thinking about best practices. Do you line up all of your elements to the grid? Just text?

What are your thoughts on vertical grids?

[Chuma]

I just started using them and using a grid system works out very well.

Because I use a grid system (960.gs) everything is automatically aligned to the grid.

If I want something to be off-grid, I can specially manage exactly how off-grid it is (e.g. 50% off) which prevents things from looking randomly placed.

I'm not sure how I would use them if I was doing something more free-form though.

[Kyusik]

In the past I built to a vertical grid. I was strict for text and tried very hard for non-text elements. I'd say without too much trouble, you can be 95% there. And, in fact, after you get started, it can make designing much easier bc it's a simplifying restriction. You dont wonder if the spacing here should be 8px, 15px, 10px? You know what the rule is and just stick to it. When you think about the grid, it does make you think a little bit more about sizing visual elements like book covers and profile images. But when the grid is adhered to, the whole page suddenly has this really pleasing, comfortable feeling to it.

[Greg]

Some of the issues with the vertical grid that I have is that you can not get your text to be the best possible line-height in terms of readability. If I have a 12px paragraph but I am using a 24px grid I may not want a 200% line-height for that paragraph. Another instance would be if I had a 24px header that wrapped to two lines, I would not want to have 100% line-height with no space in between the two lines but I may not want the 200% line-height either.

Maybe I am just wanting too much control over the readability of the paragraphs and it will not matter that much in the end and the benefits of the vertical harmony will outweigh the small difference of readability.