How does height will be calculated, based on font-size? - css

Question

When you write this: (in chrome)
<div style="font-size: 32px">txt</div>
its height will be 37px.
but this one:
<div style="font-size: 16px">txt</div>
its height will be 18px.
So my question is: is there any formula to calculate how much will be a text's height when rendered (based on font-size)?

Answer 1

The height is not based on the font-size but the line-height and the default value is normal
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.ref
Basically, we don't know exactly the value of line-height but if we explicitely define it then we can know the exact height.
An example where I am setting the height to be 1.5 x font-size
$('div').each(function(){
console.log($(this).height());
})
div {
line-height:1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>
Another one where the height is 35px for all of them:
$('div').each(function(){
console.log($(this).height());
})
div {
line-height:35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>
Worth to note that the result is different if you consider an inline element:
$('div').each(function(){
console.log("div "+$(this).height());
})
$('span').each(function(){
console.log("span "+$(this).height());
})
div,span {
line-height:1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="font-size: 32px">txt</div>
<div style="font-size: 16px">txt</div>
<span style="font-size: 32px">txt</span>
<span style="font-size: 16px">txt</span>
Or if you have different font-size inside a div or different alignment:
$('div').each(function() {
console.log("div " + $(this).height());
})
div {
line-height: 1.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<span style="font-size: 32px">txt</span>
<span style="font-size: 16px">txt</span>
</div>
<div>
<span style="font-size: 32px;vertical-align:text-top">txt</span>
<span style="font-size: 32px">txt</span>
</div>
In the first case, the height will be defined only based on the font properties (line-height play no role here).
the height of the content area should be based on the font ref
On a non-replaced inline element, 'line-height' specifies the height that is used in the calculation of the line box height.
In the second case, we have a more realistic example where the height is not only based on the line-height but also consider the alignment of the different elements to find the final height we need in order to place all of them.
More details here: https://www.w3.org/TR/CSS2/visudet.html#line-height