Why does Bootstrap set the line-height property to 1.428571429?

Solution 1:

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.