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

February 24, 2023

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

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

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