What does font-size really correspond to?

Question

I am trying to find what the value set in the font-size CSS property is corresponding to.

To give the context, I want to get in CSS the size in em of parts of the font (above the capital height and under the baseline) that I know from its OS/2 metrics. The em unit is relative to the given font-size and the OS/2 metrics are relative to the em-square.

What I expect

My expectations are based on the following references. I did not found anything more clear or precise.

1. According to the W3C reference for font-size in CSS2.1, and as quoted in all the Stack Overflow questions I found on the topic (here, here and here):

   The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.

2. Following the few knowledges I have in typography, the em square is the entire square of font metrics in which ascending, descending, gaps, (etc...) lines are defined. In OS/2 metrics, the em square is the size of the font itself (often 1000 or 2048 UPM).

   

   The only explanation I found from W3C is in an old reference from 1997 for CSS1, and it is coherent with the modern digital definition of em square I use:

   Certain values, such as width metrics, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the EM square. (...) Common values are 250 (Intellifont), 1000 (Type 1) and 2048 (TrueType).

So if I understand these references correctly, the value specified in font-size should be used to generate the entire em square of the font, and we should be able to calculate the size of a part of the font from the font's size and metrics.

For example, with...

.my-letter {
    font-family: 'Helvetica Neue';
    font-size: 100px;
    text-transform: uppercase;
}

... we should have an em square of 100px, and because Helvetica Neue has a Capital Height of 714 / 1000 (sCapHeight in the OS/2 table), a capital height of 71.4px.

What actually happens.

The generated em square is bigger than font-size (tested on the latest versions of Chrome, Firefox and Safari for Mac). At first, I thought that the browser had an other definition of em square and was making a part of the letter equal to font-size, but I did not found any OS/2 metrics (with or without ascender, descender, gaps...) that matches with it.

You can also see this CodePen. Please note that I use line-height: 1; to highlight the expected size, but my problem is with font-size (the "rendered ink") and not line-height (the "collision box"). This is something I have to precise because I have already been misunderstood several times. line-height is not the problem.

---

So I have three questions:

• Did I understood correctly the W3C references, or I am assuming things that these references did not said?
• If not, why does the generated font have an em-square greater than font-size?
• The most important: How could I know the size of the rendered em-square (relatively to the font-size) ?

Thank you for your help.

Answer 1

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.

Answer 2

Read his article: That realy helps al lot to understand the font sizes:

http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align#lets-talk-about-font-size-first