CSS - Emphemeral unit (em | equal M)

Boxdim

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

en-US/docs/Web/API/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);





Discover More
Boxdim
CSS - Relative Sizing (Length)

Relative Sizing is when you are using a length units that is relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a...
Boxdim
CSS - Rem (Root Emphemeral Unit)

rem is a length unit that is based in the the font-size of the root element of the document. To write style rules that is constant throughout the document, use the rem rem stands for root em (ie root...
How to use a HTML Input Search Element to create a Search box?

A input search is a html input element with a search type that represents a search box. It's identical to text inputs, but may be styled differently by the user agent. size is the length in em...
What are HTML Input Elements?

An inputinput element of a form control that permits to define a scalar value (single value) inputFull list Ref Doc The type attribute defined: the default behavior the design of the element....



Share this page:
Follow us:
Task Runner