Equating line-height to vertical margin

[modiophile]

I want all instances of type to have their margin-bottom (if declared) to match the line-height of said instance of type. Is this possible? Unfortunately the default relationship between line-height and font is not a perfect one, and if there is a way to tweak that I’d like to know.

[Paulie_D]

I confess I’m not getting your point.

Could you give us an instance of where this could be an issue, perhaps in some kind of demo.

What are you trying to achieve?

[modiophile]

OK, so lets say my CSS is like so:

body { font-size: 1.6em, line-height: 1.8 }
h1 { font-size: 2.4em; margin: 1em; }

So in my example, h1 would have an inherit ‘line-height’ of ‘33.6px’. My question is, how do I get the ‘margin: 1em’ to EQUAL the inherit ‘line-height’ without having to calculate each time?

[Paulie_D]

Can’t think of any way of doing that…or any reason for it that comes to mind.

I’m still not clear of a use-case for this. What effect are you trying to achieve?

Perhaps using rem?

[modiophile]

Well for vertical rhythm, a good starting point is to match your margin-bottom to the line-height of the block you’re targeting. Each typeface is different, but the default line-heights are really no good.

[Paulie_D]

I would have thought that related (proportional) line-height for each text type would be more appropriate.

Regardless, margin & line-height aren’t related so I can’t see any solution other than a rem value…or a javascript solution.

The problem is, unless you’re working with only one text size, it’s rare for a page to have a flawless rhythm.

This article – http://typecast.com/blog/4-simple-steps-to-vertical-rhythm

[Author]

Posts