137
line-height: 1.428571429;

Why does Bootstrap set line-height to this value?

(Some themes round it to 1.42857143.)

1
  • They also use 1.4285714286 in some versions.
    – natevw
    Jan 10, 2020 at 0:08

1 Answer 1

181

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.

4
  • 2
    I was about to ask the same thing. Looks like this question comes up on a regular basis. Maybe the Bootstrap dev code should have a quick explanatory comment.
    – ivanjonas
    Jul 1, 2015 at 12:46
  • 2
    I don't think this is a foolish question at all. I've seen this irregular 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
  • Because 1.5 would have been too... pedestrian, and we developers are better than that! Aug 31, 2022 at 1:06
  • @LawrenceDol It does. If your body line-height is 1.428571429, then a 20px font would have a line-height of 28.57142858, which is basically 29px.
    – Hynes
    Oct 20, 2022 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.