I noticed that font family plays some kind of role in it. But what exact font metric?
In the snippet below two spans with a different font family are handled very differently by the browser.
<div style="border-style: dotted; border-color: green; overflow: hidden;">
<div style="float: left;">
<span style="font: bold 50px/100px Droid Sans; border-style: dotted; border-color: blue;">Agjq)],Ee`</span>
</div>
<div style="float: left">
<span style="font: bold 50px/100px Sans; border-style: dotted; border-color: blue;">Agjq)],Ee`</span>
</div>
</div>I learned that to position a span in a line a browser takes the difference between line height and span height, and divides it by 2 to get the leading size. It then puts the span top one leading below the line top. The span bottom is one leading above the line bottom. In other words the span is in the middle of the line.
The question now now is this: What font metric affects the span height?
