Establishing a site’s line height, and moving forward with that number as early in the design process as possible will help create a more unified and well-paced design. Once you’ve established that line height, writing all your base type styles should flow from there.

Let’s say you’ve decided on 11px type with 18px line height. All of your type line heights and margin-bottoms should then be multiples of 18px to keep the rhythm. Here’s an example of my typography style sheet, using those settings. (Everything has already been cleared by a reset style sheet.)

body { background: #fff url(../images/grids/grid-18px.gif); color: #; font: 70%/1.63em
Verdana, Arial, sans-serif; } /* font size and line height here is for IE6 */
html>body { font-size: 11px; line-height: 18px; } /* font size and line height for
everyone else */

h1 { font-size: 32px; font-weight: bold; line-height: 36px; margin-bottom: 18px; }
h2 { font-size: 26px; font-weight: bold; line-height: 36px; margin-bottom: 18px; }
h3 { font-size: 18px; font-weight: bold; line-height: 18px; margin-bottom: 18px; }
h4 { font-size: 18px; line-height: 18px; }
h5 { font-size: 13px; font-weight: bold; line-height: 18px; }
h6 { font-size: 10px; line-height: 18px; }

p,ol,ul { margin-bottom: 18px; } /* set to same as line height */

As you can see, the body element has a background image, which creates a lined paper effect at 18px hight. This is merely for testing purposes so I can be sure that all my type flows and interacts with each other as it should.

All the type elements have line heights and margin-bottoms that are multiples of 18. This ensures that all type will stay within those 18px grid lines. Although those grid lines won’t be visible on the real site, that vertical rhythm will help give your site a more cohesive feel. I would even take that number and use it to space vertical elements on your page–boxes, graphics, etc. All of this will hopefully lead to a more pleasant experience for your visitors, albeit for a reason they won’t even be aware of.