CSS: Is font-size not acurrate?
The default line-height
is higher than the font-size
, that's why the span
is higher than 50px in your example. If you set line-height
to 1
or 100%
, you see that the span
has the same "real" height as the div
: 50px. The accent on the "A" simply exceeds the 100% line-height and goes beyond the font-size, as an addition/exception.
div {
height: 50px;
font-size: 50px;
line-height: 1;
background: green;
}
span {
background: red;
}
Green and Red are 50px high, with line-height 100%:
<div><span>jAaMgÁ</span></div>
The only thing that overflows is the accent on the "A" (and the very first letter "j", but to the left...):
<div>jAaMgÁ</div>
It is not acurrate.
CSS3 introduced a few changes allowing OpenType fonts: link. But also altering how font-size works:
- CSS2 font-size: The font size corresponds to the em square.
- CSS3 font-size: The font-size is a scale factor applied to the EM unit of the font.
If your browser supports only CSS2 the em square will be exactly the same as the font-size.
But, by supporting CSS3 most browsers will now multiply the font-size against the font's "em unit" which is diferent for each font but allways > 1.
As a result you will end with a bigger em square than expected which is the cause of the inacurracy.
A quick dirty solution would be to adjust the font size to your needs:
font-size-adjust:0.4; //equivalent to 1:1 ratio
This will allow you to alter the font "em unit" thus the span height without changing the font-size.
div {
height: 50px;
font-size: 50px;
background: green;
font-size-adjust:0.4;
}
span {
background: red;
}
.lineheight {
line-height: 50px;
}
<p>Green is 50px, Red is 50px too</p>
<div><span>fg</span></div>
<p>Combine with line-height for best results</p>
<div class="lineheight"><span>fgjAaMgÁ</span></div>