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.
line-height
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 font-size: 14px
,
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: 22.4px
.
Avoid abusing line-height
for vertical centering.
line-height
for vertical centering is only robust when there's a single line of text.
Setting font-family: monospace
makes the element's font-size
reduce to 13px
and you can't fix it. This has been documented for years now,
most prominently by Standards afficionado Eric Meyer
[1]
but also by others
[2].
The quirk has remained consistent.
If you have a sense-of or reference-to why this has never changed, send me a message?