line-height: 1.428571429;
Why does Bootstrap set line-height
to this value?
(Some themes round it to 1.42857143.)
line-height: 1.428571429;
Why does Bootstrap set line-height
to this value?
(Some themes round it to 1.42857143.)
The line-height is determined by dividing the targeted line-height size by the font-size. In this example, Bootstrap is baselining their line-height off of a 14px font-size. The target line-height is 20px:
20px ÷ 14px = 1.428571429
When determining your line-height, you want to make sure you have ample white space between your rows. This allows for ascenders and descenders without intruding on other rows. Also having ample white space allows your eyes to develop a visual rhythm while reading.
Also keeping the line-height unitless makes it more versatile. For more information, see Eric Meyer's post on this from February 2006.
line-height
cause blurriness in IE11, which made me question it. The answer makes complete sense, but rounding the number to only a couple of decimal places would probably be prudent on Bootstrap's behalf.
Feb 1, 2016 at 17:11