Bug 88600 – Inconsistent line-height when font-weight differs across a line

• Status: RESOLVED
• Resolution: INVALID
• Component: Text

[Ian MacLeod]

This shows up in Safari 5.1.7 (7534.57.2), Chrome 21.0.1163.0, iOS 5. - and I assume in previous versions as well.

See http://jsfiddle.net/5pWYr/

The links in that example have a heaver font-weight than the paragraph text, but the line height is specified in both cases.  Depending on the font size, this adds a few extra pixels to the overall block height.

My expectation is that the line height would be consistently 20px for all lines in that example.

[Ian MacLeod]

Update: This looks like a rounding issue - it seems to only occur with odd pixel values for the font-size.

As far as I can tell, this is correct behavior. Helvetica Neue and Helvetica Neue Light have different vertical metrics.

[Ian MacLeod]

Shouldn't that just affect the vertical alignment of the glyphs within the line - not grow the line height to something larger than what was asked for by the line-height property?

(In reply to comment #3)
> Shouldn't that just affect the vertical alignment of the glyphs within the line - not grow the line height to something larger than what was asked for by the line-height property?

No. See <http://www.w3.org/TR/CSS21/visudet.html#line-height>. Consider a line height of 20, an inline box with a font whose ascender height is 14 and descender depth is 4, and another inline box whose ascender height is 15 and descender depth is 3. The leading in both cases is 2 = 20 - (14 + 4) = 20 - (15 + 3), so the half leading is 1 in both cases. Now when you baseline-align the boxes, the height above the baseline is max(1 + 14, 1 + 15) = 16 and the depth below the baseline is max(1 + 4, 1 + 3) = 5, so the line box height is 16 + 5 = 21.

A practical solution for the specific case in the URL would be to specify a { line-height: 0; }.