Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does CSS measurement unit 'em' actually stand for? [closed]

Tags:

css

As the title says, I want to know what exactly the CSS unit 'em' stands for.
As in 'cm' stands for centimeter.

I am not asking what 'em' is or how it is used!

I couldn't find an answer on W3C.
The Wikipedia article was already saying "something":

The name of em is related to M. Originally the unit was derived from the width of the capital "M" in the given typeface.

My interpretation of the first sentence would be that 'em' is the pronunciation/phonetic for the letter 'M'.
But reading the second sentence, it seems that the 'e' in 'em' stands for something regarding the width of the letter 'M'.
So I'm still lost, what 'em' really stands for!

like image 748
drkthng Avatar asked Apr 05 '13 06:04

drkthng


People also ask

What does CSS em stand for?

The em is simply the font size. In an element with a 2in font, 1em thus means 2in. Expressing sizes, such as margins and paddings, in em means they are related to the font size, and if the user has a big font (e.g., on a big screen) or a small font (e.g., on a handheld device), the sizes will be in proportion.

What is em based off of?

According to Wikipedia's article on em: An em is a unit of measurement in the field of typography, equal to the currently specified point size. The name of em is related to M. Originally the unit was derived from the width of the capital “M” in the given typeface.

What does em and REM stand for?

EM is relative to the parent element's font size, so if you wish to scale the element's size based on its parent's size, use EM. REM is relative to the root (HTML) font size, so if you wish to scale the element's size based on the root size, no matter what the parent size is, use REM.

What is em in CSS for font-size?

An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px. The em square is the “box” that each glyph is sized relative to.


2 Answers

That is a historical definition; in modern usage it simply refers to the size of the font, with the word "em" itself no longer having any practical or relevant meaning. As a matter of fact, the same Wikipedia article expands on this evolution in its usage and meaning in a later section:

One em was traditionally defined as the width of the capital "M" in the current typeface and point size, as the "M" was commonly cast the full-width of the square "blocks", or "em-quads" (also "mutton-quads"), which are used in printing presses. However, in modern typefaces, the character M is usually somewhat less than one em wide. Moreover, as the term has expanded to include a wider variety of languages and character sets, its meaning has evolved; this has allowed it to include those fonts, typefaces, and character sets which do not include a capital "M", such as Chinese and the Arabic alphabet. Thus, em generally means the point size of the font in question, which is the same as the height of the metal body a font was cast on.

Particularly in terms of CSS, an "em" doesn't necessarily refer to the width of the capital M for a particular font; it's just a relative quantity.

If you're asking about the etymology of the word "em", Wikipedia itself only contains a reference to the Adobe Glossary, which has little more to say about it:

A common unit of measurement in typography. Em is traditionally defined as the width of the uppercase M in the current face and point size. It is more properly defined as simply the current point size. For example, in 12-point type, em is a distance of 12 points.

It's not explicitly mentioned anywhere authoritative that it's a phonetic representation of the capital M, but considering its namesake definition I wouldn't rule out such a possibility.

like image 146
BoltClock Avatar answered Oct 05 '22 16:10

BoltClock


In my opinion em stands for nothing but just pronunciation/phonetic for the letter 'M'. Similarly we have ex, one ex is the x-height of a font (x-height is usually about half the font-size).

like image 45
user2029015 Avatar answered Oct 05 '22 14:10

user2029015