@cybershot As far as I can tell, that is expected behavior. CSS centers text vertically, placing space above and below to create the appropriate line-height. You can check this by changing the line-height to a fairly small number (i.e. 12px). The best way to solve it would be to use a negative top margin, as you can’t change just the top part of the line-height on its own (another option being a smaller line-height and larger bottom-margin, but this causes problems with multiple lines).
Keep in mind though: depending on the typeface, and the way each browser renders said typeface, it may be slightly off. The space rendered above and below each line of text is calculated using the metrics of a typeface, and this can vary greatly.
You can set the h1 line-height to .75 but it seems pointless and would disrupt the overall line-height (below the h1). I agree with Josh about the negative margin but I think it’s one of those details that might bug you but it’s actually quite fine and something no one would notice.
@joshuanhibbert I don’t think I’ve ever seen a typeface’s cap height adding space like that. From what I’ve seen, the top of the capital glyph will butt itself up against the cap height. Sometimes even go above it (such as the overshoot of an ‘O’). I agree with your initial response that it is due to the browser.
@cybershot I think the confusion is due to it being considered abnormal behavior, which it is not. Sure, it doesn’t equate to leading in print design, but that is how it is specified (http://www.w3.org/TR/CSS2/visudet.html#line-height):
Still for each glyph, determine the leading L to add, where L = ‘line-height’ – AD. Half the leading is added above A and the other half below D, giving the glyph and its leading a total height above the baseline of A’ = A + L/2 and a total depth of D’ = D + L/2.
So in layman’s terms: If there is a positive difference between the capital height of the type, and the line-height, that difference is split in half, of which each half is placed above and below each line of type.
@joshuanhibbert Did you edit the 2nd paragraph? http://css-tricks.com/forums/discussion/comment/73205#Comment_73205
If not, I think I misread what you had said.
@ChristopherBurton I save a comment before proof reading, and then making slight changes. So you might have caught it in the minute before I have proof read it? I know it’s a strange way to comment, it’s just something I’ve always done.
As you can see, the margin-top fix (on the left) doesn’t mess with the baseline like the line-height fix does. Also, each line of type sits in the middle of its line, according to the specifications, despite being totally different to how it is done in print design.
You must be logged in to reply to this topic.