Normalize.css: line-height issue

[Oloompa]

normalize set line height to 1.15

using different fonts cause scrollbar appearing even if no need:

see: https://codepen.io/anon/pen/vqoGrj

setting line-height: normal; solve issue

Please don't answer to set overflow to hidden. For some user case (responsive overlay for example) we need an automatic overflow.

[mattbrundage]

The reason there is a scrollbar in your reduced test case is that the computed heights of the text nodes are taller than the heights of the inner divs, whose heights are calculated by multiplying the line-height by the font-size.

When using unitless line-heights, one cannot assume that the computed height of the text node (determined by the font's unique metrics) will be equal to or less than the height of the line-box (the line-height multiplied by the font-size).

The computed value of line-height: normal differs from font to font -- it's not always equal to 1.15. It happens to be so for Helvetica, but definitely not for Open Sans (the font you used in your reduced test case,)

Always worth another read: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

See issue #778

@jonathantneal, I'm now thinking that it's imprudent for Normalize to set a unitless line-height on the html element as we have no way of knowing what font-family is in use.

[Oloompa]

@mattbrundage very interesting blog post