Search code examples
htmlcssfont-size

What does it mean to set the root element's font-size in em units?

I've not been able to find the official definition of em units, but I have found this in the spec:

enter image description here

I've also found a lot of other sources (listed below). This got me thinking, what does it mean to set the font size of the root element (i.e., <html>) to em units? Although a lot of my sources recommend using em, I couldn't find any that call out root element usage specifically.

html {
  font-size: 1em;
}
<html>

<body>
  <h1>html { font-size: 1em; }</h1>
  <p>Hello World!</p>
</body>

</html>

html {
  font-size: 1.5em;
}
<html>

<body>
  <h1>html { font-size: 1.5em; }</h1>
  <p>Hello World!</p>
</body>

</html>

html {
  font-size: 0.5em;
}
<html>

<body>
  <h1>html { font-size: 0.5em; }</h1>
  <p>Hello World!</p>
</body>

</html>

In these three above examples, I see the difference with my eyes, but what is the correct way to interpret what I'm seeing? In other words, what does html { font-size: <x>em; } mean?

Sources

  1. https://ux.stackexchange.com/questions/7820/font-size-for-mobile-sites
  2. https://w3c.github.io/csswg-drafts/css-values-4/#em
  3. https://www.w3.org/Style/Examples/007/units.en.html#font-size
  4. https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Solution

  • From the specification

    When used in the value of the font-size property on the element they refer to, the local font-relative lengths resolve against the computed metrics of the parent element—or against the computed metrics corresponding to the initial values of the font and line-height properties, if the element has no parent.