CODEWITHSUNDEEP
csstwitter-bootstrap-3
Marty C.
Marty C.

Reputation: 696

Discrepancy in line height computation; how does Bootstrap do it?

Based on my understanding of line-height and box model calculations, I believe that the height of an element, margins and all, is the sum of the following:

However, when I implement this myself, as shown in this fiddle, everything looks good in Firefox and in Chrome except for the line-height.

.btn {
    margin-top: 8px;
    margin-bottom: 8px;
    border: 1px solid darkred;
    padding: 6px 12px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
}

Mathematically, my font-size (14px) multiplied by the line-height (1.42857) should yield 19.99998px, which effectively rounds to 20px. However, in Firefox the resulting line height is 22px, and in Chrome the resulting line height is 19px. What is accounting for this discrepancy? Why am I not getting the expected 20px line height?

Inexplicably, Bootstrap buttons appear to correctly yield 20px for the same concept in Firefox and in Chrome. I hope someone can help me understand why and how Bootstrap accomplishes this feat.

Upvotes: 1

Views: 1525

Answers (1)

Guffa
Guffa

Reputation: 700562

The line-height is not multiplied with the font size setting, it's multiplied with the actual size of the font as rendered.

The actual size of the font is based on the font size setting, but it differs a bit depending on the font used, the font implementation, the operating system, font rendering settings, et.c.

Setting a font size like 14px doesn't mean that the text ends up exactly 14 pixels high, rather something that is supposed to look like 14 pixels high, depending on the settings in the font. Some fonts may for example be more narrow and thin, so it would need to be rendered slightly larger than other fonts to seem like the same size. This is up to the discretion of the font designer, so it may differ somewhat from what you feel would be correct.

Also, font sizes for the graphics software are measured in points, not pixels. When you specify a size in pixels, that is translated to a point size that would give approximately that size in pixels. There is some rounding going on there, and the exact algorithm differs between browsers, so that gives a little variation.

Upvotes: 1

Related Questions