CODEWITHSUNDEEP
htmlcssfont-size
rfrostr
rfrostr

Reputation: 91

How can I calculate the size of font when using different font-types?

This article (Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira) says we can determine a font type’s 'real' px size by adding its ascender and descender and comparing this value with its em-square (UPM). For instance, in the example it gives, a font-type with 1100 ascender and 540 descender (its UPM is 1000) means when font-size is set to 100px it's actually 164px.

Don’t you also need to add its x-height?

Upvotes: 1

Views: 428

Answers (1)

Temani Afif
Temani Afif

Reputation: 274385

Don’t you also need to add it’s x-height?

No, in the article you can read that:

based on its relative units, metrics of the fonts are set (ascender, descender, capital height, x-height, etc.). Note that some values can bleed outside of the em-square.

x-height is one of metrics that we can use but it's already included in the sum of ascender + descender

Then you can read:

We can also predict that capital letters are 68px high (680 units) and lower case letters (x-height) are 49px high (485 units). As a result, 1ex = 49px.

enter image description here https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

So the content area is the sum of ascender and descender (110px + 54px) and the x-height is the size of lowercase letters which is only 49px and already included in the content area

Upvotes: 2

Related Questions