Ahem font is required for this test; content is "XpÉ"

Anton Prowse's interaction between vertical-align, line-height and font-size

  To see the interaction between vertical-align, line-height and
font-size, consider the test case below.

<div style="line-height: 20px; width: 280px;">
     text text text text text text text text text text text text
     <span style="color: lime; line-height: inherit; font-size: 140px;">tept</span>
     text text text text text text text text text text text text
</div>

Observe how the line box containing the span is taller than the other
line boxes, yet not as tall as the span's inline box.  This is because
the line-height of the span is smaller than the vertical extent of the
inline box derived from the large font size.  (Hence the leading is
negative.)  The top of the guide box lies somewhere in the middle of the
"hole" in the 'e' (no doubt there exists a technical term for that
hole!) and the bottom of the guide box lies somewhere just above the
curly tip of the bottom of the 't'. Since the vertical align is
'baseline', the baselines of the large letters and the preceding smaller
letters line up.  The line box height is then the distance between the
lowest of the bottoms of the guide boxes on the line (which is the
bottom of the guide box of the smaller text) and the highest of the tops
of the guide boxes on the line (which is the top of the guide box of the
larger text). Hence the line box's top intersects the hole in the large
'e' and its bottom is a little below the lined-up baseline.