How is font-size measured? [duplicate]

Question

Background: I'm trying to do font rendering using glyph-bitmaps and I need a way to verify that I'm rendering text in the correct size on the screen.

So when someone says: font-size: 64px where this 64 should appear? I tried the same exercise in HTML, but now I'm more confused than before I started. This is how HTML renders text with font-size: 64px. The red lines - me trying to fit a box of height: 64px around these letters: As you can see I can't find a way to match that 64px to the visual letters.

Can someone explain to me where this 64px should appear?

I know that font sizes is a very old thing that comes from physical paper presses and some spacing is taken into account too but isn't there any logic/rules in the digital age? Is it completely arbitrary in the font files? Let's say I'm making a new font: aren't there any guidelines on how 64px font should be sized?

Answer 1

Originally, the font-size is measured by the so-called em-square, which is the horizontal width of the uppercase M-Character:

The height of the type piece is known as the ‘em’, and it originates from the width of the uppercase ‘M’ character; it was made so that the proportions of this letter would be square (hence the ‘em square’ denomination). (http://designwithfontforge.com/en-US/The_EM_Square.html)

In CSS, the font-size in pt or px represents, if anything, this em-square. But:

The other day I looked at a bunch of lesson slides from a university-level typography course. One of them claimed that the distance from the baseline (bottom of a letter such as H) to the cap height (top of a letter such as H) was the point size. I wish that were true, as it would be much simpler than the reality. On average, the cap height is about 70% of the point size. (http://www.thomasphinney.com/2011/03/point-size/)

So I guess the answer to your question is: it depends. The em-square still is the guideline, but the actual size of the font dramatically depends on the designer and is often much bigger than the em-square. Or you can try and build on that 70%-mark and look for 70% of your 64px (which would be about 45px) to be the height of normal uppercase letters such as H or M.

I also found this link pretty helpful for typographical questions in CSS: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

PS Note, that this typographical em-square that both quotes talk about is not the same as the em-unit in CSS. In CSS, em is the font-size relative to the parent container (or the default-settings in your browser).