Scaling line-height for vertical rhythm

Question

I have a question about scaling line-heights for vertical rhythm. I'm going to be using pixels in the example below, just to make things easier. Let's say this is the base structure for my p-tag:

p {
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 30px;
}

Now in this case I've got my rhythm unit set to 30px. So, question one: does this mean my vertical spacing between elements needs to be a multiple of 30, and my line-heights need to be a multiple of 30. Is that correct?

And my second question is, how do you stager spacing so there is more on the top lets say, than the bottom? Let's say I wanted to make an h2 whos margin bottom was less than it's top. How do I scale properly, without breaking the vertical rhythm?

Answer 1

Now in this case I've got my rhythm unit set to 30px. So, question one: does this mean my vertical spacing between elements needs to be a multiple of 30, and my line-heights need to be a multiple of 30. Is that correct?

That's pretty much it, yes.

And my second question is, how do you stager spacing so there is more on the top lets say, than the bottom? Let's say I wanted to make an h2 whos margin bottom was less than it's top. How do I scale properly, without breaking the vertical rhythm?

Just consider the h2 as a multiple "height" of the line-height that you have set as your base unit. Use margin-top as well as margin-bottom to refine the spacing of the h2 until it looks good "to the eye. Cf.:

30 line
30 line
30 p margin-bottom
15 h2 margin-top
40 h2
5  h2 margin-bottom
30 line
30 line
etc

(So all of that h2 section adds up to 60, or 2x30)

And the CSS:

p {
 font-size: 20px;
 line-height: 30px;
 margin-bottom: 30px;
}
h2 { // consider this really as a unit of 60 (30x2)
  font-size: 40px;
  margin-top: 45px; // = 15+30 (*see below)
  margin-bottom: 5px;
}

*The margin-top isn't simply 15, because we must compensate for margin-collapse:

https://www.w3.org/TR/CSS21/box.html#collapsing-margins

And last comment: Don't worry too much about making all of your work conform to a set pattern. There are some contexts where a rigid pattern translates as overly "stiff" to the reader. So perhaps in a clinical corporate setting this might be appropriate, but when we try to do the same thing for an organic farm website, it is far too rigid and ends up being completely inappropriate, visually.

If we are really good designers, then we are like the jazz drummer who has the ability to play "behind the beat", and does so exactly when it is necessary.