: Vertical rhythm/baseline grid in Web Design I recently read some articles about the importance of good vertical rhythm/using a baseline grid for good typography in web design. I decided to try

@Megan533

This very nice article on Smashing Magazine about baseline and vertical rhythm gives you some insight into both the importance of baselines in webdesign and how to implement them in your css. It uses font-size, line-height, padding and margin on default html elements to have everyting line up with your baseline grid.

To help match everything to the grid, a background image is very useful, as Dawson suggests.

I have been following this technique for my latest few designs, and I think it really pays off.

Vote Up Vote Down

@Cody3331749

The vertical rhythm isn't hard to implement, especially if you start with a CSS reset. I stumbled upon this link 24ways.org/2006/compose-to-a-vertical-rhythm some time ago, and have since been using the technique in all of my designs.

What I've found is that after working with a "canned" set of type declarations in my CSS file (h1 - h6, p, etc. - specifically, size, line-height, bottom margins) it's very easy to deploy.

Here's a background image that has helped me see things a little clearer...especially, when I was first using the vert rhythm.



It's may be tough to see, but when it's repeated as a background-image: you'll see a 20x20 grid.

HTH

Note: I like the typography in the sites that have used this technique better than those that have not. In both cases however, there always seems to be an element or two that have to "cheat the system" to look "right". I've also found that paying attention to the overall line-height (say 18px for a 12px font base) makes setting margins and padding around images, graphical headers, and the like pretty straight forward (18px). Also...the urge to calculate everything goes away...you'll start to notice a "vertical rhythm" about the layout, and be able to pull the right padding/margin/line-height from a very short list of values in your head.

Vote Up Vote Down

@RJPawlick971

The baseline grid in web design is a need academic puzzle but mostly impractical from a hard-coded mathematical standpoint. Since CSS has no concept of a baseline for type, it's technically impossible to get baselines to match.

You can come close to spacing things, but you eventually end up with something that may make sense when looking at the numbers, but likely is off visually and you end up straying from the formula to make sure things look right.

So, in summary, a visual rhythm is important, but build it from your gut, not some equations that will just drive you nuts implementing properly on the web.

As an aside, note that the concept of a baseline grid comes from the world of print design...specifically multi-column layouts such as in a newspaper where you want the type to line up from column to column as a preference. To make it easy to typeset that kind of publication, a baseline grid makes sense, and is relatively easy to implement in the world of DTP applications.

Vote Up Vote Down