How Does Height Will Be Calculated, Based on Font-Size

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!

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

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>

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

Font scaling based on width of container

If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.

If the container is the body, what you are looking for is Viewport-percentage lengths:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.

The values are:

vw (% of the viewport width)
vh (% of the viewport height)
vi (1% of the viewport size in the direction of the root element's inline axis)
vb (1% of the viewport size in the direction of the root element's block axis)
vmin (the smaller of vw or vh)
vmax (the larger or vw or vh)

1 v* is equal to 1% of the initial containing block.

Using it looks like this:

p {
    font-size: 4vw;
}

As you can see, when the viewport width increases, so do the font-size, without needing to use media queries.

These values are a sizing unit, just like px or em, so they can be used to size other elements as well, such as width, margin, or padding.

Browser support is pretty good, but you'll likely need a fallback, such as:

p {
    font-size: 16px;
    font-size: 4vw;
}

Check out the support statistics: http://caniuse.com/#feat=viewport-units.

Also, check out CSS-Tricks for a broader look: Viewport Sized Typography

Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography

And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu

Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS

font-size vs line-height vs actual height

First, I recommend reading my answer in Inline elements and line-height. To summarize, there are various heights related to inline boxes:

Height of the inline box, given by line-height
Height of the line box, which in simple cases is also given by line-height, but not here.
Height of the content area of the inline box, which is implementation dependent. This is the area painted by the red background.

The other height in your case is the height of the parent div. This is determined by §10.6.3. In this case, since the box establishes an inline formatting context with one line,

The element's height is the distance from its top content edge to [...] the bottom edge of the last line box

So the height of the parent block is given by the height of the line box.

What happens here is that the height of the line box is not the line-height of your inline box. And that's because the line-height of the parent block is also taken into account:

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element.

The minimum height consists of a minimum height
above the baseline and a minimum depth below it, exactly as if each
line box starts with a zero-width inline box with the element's font
and line height properties.

We call that imaginary box a "strut."

If you set parent's line-height to 0, and child's vertical-align to e.g top, then the height of the parent will exactly be the line-height of the child.

.outer {  margin-top: 50px;  background-color: green;  width: 150px;  font-family: "Times New Roman";  line-height: 0;}.letter-span-1 {  background-color: red;  line-height: 40px;  font-size: 40px;  vertical-align: top;}.letter-span-2 {  background-color: red;  line-height: 15px;  font-size: 40px;  vertical-align: top;}.letter-span-3 {  background-color: red;  line-height: 65px;  font-size: 40px;  vertical-align: top;}

<span class="letter-span-1">XxÀg</span><div class="outer">  <span class="letter-span-1">XxÀg</span></div>The parent block is 40px tall.<div class="outer">  <span class="letter-span-2">XxAg</span></div>The parent block is 15px tall.<div class="outer">  <span class="letter-span-3">XxÀg</span></div>The parent block is 65px tall.