Does CSS use the capital M as reference of the font size?

Question

edit: meanwhile I have found this answer, that said I dont know if it is still relevant.

Here my sandbox using codepen: https://codepen.io/joondoe/pen/orpQRp

The CSS specifications affirms: CSS inherited the units pt (point) and pc (pica) from typography

Using wikipedia, I know one point= 0.0352778cm. Hence, dividing 1 by 0.035 give me 28.6 as a quotient. Great.

The letter M is effectively 1cm. I assume it is the size of the capital M but I haven't found an explicit certification of my assumption. Maybe someone have some source to share treating of this question?

h1{
  font-size:28.5pt;
}

<h1>M</h1>
<p> <i>the capital <b>M</b> makes approximately 1cm</i><p>

Any hint would be great, thanks

Answer 1

Does CSS use the capital M as reference of the font size?

Short answer: no, the letter M isn't used for reference. Quoting this fantastic answer:

Back when letters were created on metal, the em referred to the size of each block that the letter would be engraved on, and that size was determined by the capital M because it usually takes up the most space.

(...)

The actual size of one fonts glyphs vs another font are always going vary dependent on:

• how the developer designed the font glyphs when creating the font,
• and how the browser renders those characters. No two browsers are going to be exactly the same.
• the resolution and ppi of the screen viewing the font.

Thus font sizes aren't standardized and you can have two different fonts set to the same size but with the same letters on each font having very different sizes (see example below). The size of each letter is defined by whoever designs each font. That being said, the largest character in different fonts should be about the same size.

h1{
  font-size:28.5pt;
}

#courier {
  font-family:courier;
}

#arial {
  font-family:arial;
}

<h1><span id="courier">/M</span><span id="arial">M/</span></h1> 

<p> <i>the capital <b>M</b> makes approximately 1cm</i><p>