HTML and CSS Reference
In theory, one “em” is equal to the width of a lowercase “m” in the font used—that's
where the name comes from, in fact. It's an old typographer's term. However, this is
not assured in CSS.
ex , on the other hand, refers to the height of a lowercase x in the font being used.
Therefore, if you have two paragraphs in which the text is 24 points in size, but each
paragraph uses a different font, then the value of ex could be different for each para-
graph. This is because different fonts have different heights for x , as you can see in
Figure 4 . Even though the examples use 24-point text—and therefore, each example's
em value is 24 points—the x-height for each is different.
Figure 4. Varying x-heights
The rem unit
Like the em unit, the rem unit is based on declared font size. The difference—and it's a
doozy—is that whereas em is calculated using the font size of the element to which it's
applied, rem is always calculated using the root element. In HTML, that's the html
element. Thus, declaring any element to have font-size: 1rem; is setting it to have the
same font-size value as the root element of the document.