CSS: Is font-size not acurrate?

Question

So, link and link give hints about how fonts are implementation dependent. This question is very especific to font-size in the following case:

font-size: 50px; will take aditional space to render (60px in my case)

div {
  height: 50px;
  font-size: 50px;
  background: green;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}

<p>Green is 50px, Red is not</p>
<div><span>fg</span></div>

<p>You can still see the overflow without span:</p>
<div>jAaMgÁ</div>

<p>line-height does not solve the issue (just makes it prettier)</p>
<div class="lineheight"><span>jAaMgÁ</span></div>

• What i expect to happen is: ascender and descender inside em square
• What i get is: descender is draw outside the em square.
• From the documentation link: "The font size corresponds to the em square"
• From this reference the em square should include both descender and ascender:

So why is the browser doing something else? I tried Firefox and Chrome, and both seem consistent with this (miss?)behaviour... did the specification change? if so, what is the appropiate way to tell the browser the font height including descender and ascender?

(width can be ignored, and you are free to use up to CSS4, but CSS3 is appreciated)

Answer 1

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>

Answer 2

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>