Use unitless line-height

[twhite313]

Currently line-height is being set to $baseline which starts out as 1.55rem. The result is that the calculated value is 24.8px (16px * 1.55rem). In some cases, font sizes are changed above that 24.8px size, resulting in text that overlaps when lines wrap.

Line-height should always be unitless. Suggest changing $baseline to 1.55 (or more appropriate number).

References:

• https://css-tricks.com/almanac/properties/l/line-height/#article-header-id-0
• http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

[paulcpederson]

I would tend to agree that line height should be unitless. We've used the $baseline var in other places as a way to add padding that sustains vertical rhythm, so we'd have to just go through and convert all those to rems again. Marking as bug, and assigning to next release.

[twhite313]

Would it be easier to leave $baseline as is, and just change the line-height calls? Maybe a new variable $line-height?

[paulcpederson]

That could work. Or maybe $baseline-ratio or something

[twhite313]

A parallel conversation cropped up yesterday with Design -- there is a desire to move font-size-1 and up to line-height: 1.25

We should engage with them to determine all of the needs.

[HeathMeyette]

Assigning to Tim. @tim-white-esri please feel free to reassign to your team members that have additional bandwidth.

[paulcpederson]

all of these have been converted, will be part of next release