market-sans: fix font spacing issues across components

[ArtBlue]

After the recent implementation of Market Sans v2, there was some fallout of vertical font spacing across numerous components. These tend to be related to line-height' and vertical margin/padding`.

It looks like in most (all?) places line-height is not explicitly set, possibly because with the additional vertical spacing of the old v1 font, it looked visually consistent with the specs. However, since Market Sans v2 has equal vertical spacing within the glyphs, visually there is no more "assumed" line-height. This means that a lot of layouts will no longer look visually acceptable.

Without an explicitly set line-height, the value of normal is used, which defaults to what normal is set to in each browser's user agent. In Chrome, normal is ~ 1.2em, but other browsers may have other defaults.

Explicit line-height Seems Necessary

Here's one example of a component with Market Sans v2 without line-height (normal) vs v2 with the explicit line-height set.

Market Sans v2 without line-height (normal)

Market Sans v2 with the explicit line-height set

Relative line-height Seems Necessary

Currently, in Skin we have line height tokens in px and in Playbook defined in rem values. Neither seem scalable since px is an absolute value and rem refers to an absolute value of the user agent style on body.

When the font-size is set to something larger, in this case, 200%, the way things are set currently would create badly spaced text. It would create roughly the opposite problem where the default normal line-height would yield something acceptable, but the explicitly set absolute line-height would be problematic.

Implicit normal line-height

Explicit line-height: 14px (per Playbook)

Using em Seems Necessary

By using em as the relative line-height of a font, ties the line-height with the relative font-size creating a fully scalable solution. Since our baseline line height is 20px and our font size is 14px, we can get the line height by 20/14 = line-height: 1.4285714286em, which looks rather good automatically on smaller fonts and larger.

Future Flexible Responsive Font Scalability

Using em also provides more flexibility for creating fine-grained responsive line heights based on responsive fonts. This means that depending on the breakpoint, we would be able to create different font-size/line-height scaling that does not have to retain the same em ratio as 1.4285714286.

[ArtBlue]

Blocking this until we have a scalable path forward (meeting on this soon) for using relative spacing tokens. We may also have to create separate line-height tokens.

[ArtBlue]

The most apparent fixes can be seen in the diffs from Percy build 293.