CSS - Emphemeral unit (em | equal M)

About

The emphemeral unit (em) is a relative size to the default font-size set in a browser (=16px on windows)

A font-size of 0.875em translates to 87.5% of the default fontsize of the browser.

To simplify: <MATH> 1 \text{ em} \approx 1 \text{ character} </MATH>

em is an old typographic unit also known as:

  • em square (ie a blank square where the length of each side was the same as the width of an uppercase M)
  • or mutton.

Origin

The origin of its name come from the its first definition: em is equal to the width of the capital letter M (e=equal, m=capital letter M). <MATH> \text{"em"} = \text{''equal''} + \text{''capital letter M''} </MATH>

An em square was a square blank type, where the length of each side was the same as the width of an uppercase 'M' – normally the widest glyph in a given font.

It is often used in typography to specify:

Computation

The em unit is equal to the computed value of the font-size property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

Example

Length

The input text has a size with a em unit.

<label>Below, for a size of 5em, you should see only 5M</label><br/>
<input type="text" size=5 value="MMMMMMM"/><br/>
<label>Below, for a size of 5em, you should see a little bit more of 5 characters</label><br/>
<input type="text" size=5 value="0123456789"/><br/>

Computation

Window/getComputedStyle

.parent { font-size: 20px }
.medium { font-size: 0.75em }
.small { font-size: 0.5em }
<div class="parent">
    <p>Hello Nico</p>
    <p class="medium">Hello Nico</p>
    <p class="small">Hello Nico</p>
</div>
div = document.querySelector("div");
console.log("The font size of the parent div element is "+window.getComputedStyle(div).fontSize);
allP = document.querySelectorAll("p");
console.log("The font size of the first p element is "+window.getComputedStyle(allP.item(0)).fontSize);
console.log("The font size of the medium p element is "+window.getComputedStyle(allP.item(1)).fontSize);
console.log("The font size of the small p element is "+window.getComputedStyle(allP.item(2)).fontSize);

Powered by ComboStrap