I am writing a web to print application, and trying to understand how the browser is rendering text within a paragraph. The link below was very valuable in understanding the relationship between line-height, font metrics and vertical-align:
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
However, as my codepen below demonstrates, the browser renders the overall height of paragraphs differently when its text nodes inherit from one font-family (Allura in this example), but are styled inline with another (Pt Serif in this example), as opposed to the paragraph itself simply having a font-family of "PT Serif".
https://codepen.io/itozer/pen/LzOoxp
<style>
p {
text-align: center;
width: 500px;
font-size: 50px;
line-height: 1.4em;
}
</style>
<p id="paragraph1" style="position: absolute; top: 0; left: 0; font-family: PT Serif;">
The lamp once out<br>
Cool stars enter<br>
The window frame.
</p>
<p id="paragraph2" style="position: absolute; top: 0; left: 550px; font-family: Allura;">
<span style="font-family: PT Serif;">
The lamp once out<br>
Cool stars enter<br>
The window frame.
</span>
</p>
(Note: I know that changing the vertical-align of the span of paragraph2 to top will render the paragraphs the same, but this ultimately does not solve my problem)
Can someone provide information about why the overall height of paragraph2 in the codepen above is greater than the overall height of paragraph1?