Run the following code snippet:
span.text {
border: 1px solid blue;
line-height: 1;
}
span.box {
display: inline-block;
border: 1px solid red;
height: 1em;
}
span.true-height {
display: inline-block;
height: 1.2em;
width: 1em;
background: green;
vertical-align: text-bottom;
}<span class="text">This box is taller than 1em</span>
<span class="box">1em</span>
<span class="true-height"></span>You'll notice that the two spans are of different heights. A span containing nothing but text (with line-height: 1) is taller than 1em.
Is the difference between the "true font height" and em's consistent among fonts? In the example above the "true font height" is 1.2em. Is this a product font file formats, or just particular to this one font?