This game-changing/feeling-evoking quality is commonly ignored or misattended to on the web.
Here's how to make it work:
Decide whether or not Type is an integral part of your app. Here are some key indicators that Type is integral to your app:
As stated above, Type is probably an integral part of your app.
Trust your designers. Your designers will have thought about the vertical rhythm for the Type for that context.
Often times, vertical rhythm is meant to be the same throughout an entire page, but if your app has any notion of pluggable user-facing widgets or a notion of a 'frame', this may not be the case, worth making the distinction between these two styles.
When building vertical rhythm into a context, limit bi-directional margin declarations.
You don't want anything bi-directional. You want to extinguish bi-directionality. You really and truly want to express the Type's vertical rhythm in one direction.
Avoid specifying units for
line-height, especially the
em unit, unless there's a really good reason for it.
Usually you want
line-height to be computed relative to the
font-size of an element, not the parent el.
e.g. if parent has
font-size: 36px; line-height: 1.6em and it has a child with
the child gets a computed
line-height: 57.6px which is probably much larger than anyone intended.
If you use unit-less
line-height the child element gets the more appropriate computed
line-height for vertical centering.
line-height for vertical centering is only robust when there's a single line of text.
font-family: monospace makes the element's
font-size reduce to
and you can't fix it. This has been documented for years now,
most prominently by Standards afficionado Eric Meyer
but also by others
The quirk has remained consistent.
If you have a sense-of or reference-to why this has never changed, send me a message?