How Is Font Size Calculated

How is font size calculated?

See the spec:

The font size corresponds to the em
square, a concept used in typography.

Note that certain glyphs may bleed
outside their em squares.

How is font-size measured?

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).

What is calculated value for font-size

Your question is a little confusing, but I'll try to cover the details off as I think you're asking.

First, I think you mean the "Computed" value rather than the "Calculated" value. You also ask in a comment about the "Used" value, and to get a full picture we also need to cover some other values, the "Specified" value, the "Resolved" value and the "Actual" value.

Now taking the font-size first, we have for the .myspan element

Specified value = 220%
Computed value = 18px * 220% = 39.6px
Resolved value = 39.6px

(The resolved value for font-size is the computed value)
Used value = 39.6px

(Always the same as the computed value for font-size)
Actual value = about 39-40px

(The CSS pixels will be converted to device pixels. some other approximations may be made based on the available fonts and the closest renderable number on the device is used)

For the width, things work slightly differently

Specified value = 50%
Computed value = 50%

(The pixel length is not known at computed value time because the layout hasn't happened at this step)
Used value = 200px * 50% = 100px

(The layout is done and the pixel value is determined)
Resolved value = 100px

(The resolved value for width is the used value)
Actual value = about 100px

(As with font-size, the CSS pixels will be converted to device pixels and the closest renderable number on the device is used)

Now, what causes confusion is that when you use getComputedStyle() in JavaScript, or inspect the "Computed Values" tab in the browsers' developer tools, you don't get the "Computed" values for the element - You get the "Resolved" values for the element.

For getComputedStyle(), this is just an historical anomaly that exists for backward compatibility reasons. Why the developer tools also report the Resolved value, I don't know.

What does font-size really correspond to?

Your understanding of the W3C references is correct, but your understanding of the red box is not.

The red box does not depict the em-square. Its height is the sum of the ascent and descent from the metrics.

How is div height calculated from font size

I'm afraid the answer to your question is that it isn't straightforward.

For proportional fonts, the line height is either

the value of the line-height property if it's set in absolute lengths.

<div style="line-height:20px">Text</div> will be 20px high
or the value of the line-height property multiplied by the font-size property if the line-height is a unitless value.

<div style="line-height:1.5; font-size:14px">Text</div> will be 21px high
or some value chosen by the browser if line-height is set to its default value of normal.

<div style="font-size: 14px;">Text</div> will usually be around 17px high, but this may vary among browsers and/or fonts

With monospace fonts however, like "Courier" in your example, the calculation depends on the browser and the browser settings.

Many browsers use a smaller size than the font-size for monospace fonts. This is a historical convention. How much smaller exactly, the convention doesn't say.

So with monospace fonts, all bets are off. Sorry!

CSS - calc() on font-size - changing font size based on container size

Calc is still in it's infancy in terms of support & usefulness. By design it's really just there for doing simple math, like (100% - 20px). It really won't do the math complex enough to make the calculations possible. You are looking for a solution that will size the text based on the amount of space the letters physically take up horizontally (which depends on the letter's individual sizing) and the amount of space available for the containing div.

CSS is abstracted away from the actual element's contents, and it has no way to really discern if something currently "fits" or not. It can layout guidelines for how to handle things when they do or don't fit, but it can't adjust itself according to the content like you want it to. (It's not just you, we've all faced this problem or a similar version of it at some point.)

Check out Chris Coyer's post on what Calc might be handy for: http://css-tricks.com/a-couple-of-use-cases-for-calc/

How Is Font Size Calculated