How wide is an "em" unit in CSS?

Question

This unit is used for padding, text and other measurements that can use pixels.

Answer 1

I like the answer from the old typesetter, very informative.

As some other answers have said, I have included some references below that specify most fonts have a different 'em' size, and using ratios, some fonts can be substituted for others.

According to the CSS2 specification,
"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.) "[1]

They also say,
"15.4.3 Coordinate units on the em square
Certain values, such as width metrics, are expressed in units that are relative to an abstract square whose height is the intended distance between lines of type in the same type size. This square is called the em square and it is the design grid on which the glyph outlines are defined. The value of this descriptor specifies how many units the EM square is divided into. Common values are for example 250 (Intellifont), 1000 (Type 1) and 2048 (TrueType, TrueType GX and OpenType).

"If this value is not specified, it becomes impossible to know what any font metrics mean. For example, one font has lowercase glyphs of height 450; another has smaller ones of height 890! The numbers are actually fractions; the first font has 450/1000 and the second has 890/2048 which is indeed smaller. "[2]

Some more information regarding the size of fonts,
"For example:

"widths: U+4E00-4E1F 1736 1874 1692
"widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792
1815 1848 1870 1492 1715 1745 1584 1992 1978 1770

"In the first example a range of 32 characters is given, from 4E00 to 4E1F. The glyph corresponding to the first character (4E00) has a width of 1736, the second has a width of 1874 and the third, 1692. Because not enough widths have been provided, the last width replicates to cover the rest of the specified range. The second example sets a single width, 1490, for an entire range of 256 glyphs and then explicit widths for a range of 16 glyphs."[3]

I hope this helps.

Answer 2

The em unit is the square of the point size of the font. If a font is 12 points high, then the em space will be 12 points wide. The en was half the width of the em and the "thin" unit was 12 thin strips of lead. I should know, I used to set type for printers and newspapers using hot metal and thought I could keep making money as a web page designer.

In hot metal days the em character was a piece of lead without a letter on top of it so that it did not pick up any ink. It's main purpose was to indent the paragraphs all the same amount and let you make variable spaces between the words so the right-hand margin would flush right.

Sometimes the extra-wide font faces use a non-standard and wider em.

So, as a general rule, the em is the size of the point size but sometimes a computer program ( like WordPerfect ) makes all ems a specific width like we would use inches to measure with.

Answer 3

em refers to the width of the letter 'm' in a given character set. m is usually the widest character in a character set, so measuring in ems ensures that you will not run out of room for the count of characters in a line.

since different fonts have different average widths for characters, the letter 'm' tends to be a good overall gauge of sizes. obviously it's dynamic, but it keeps your layout pretty consistent lengthwise if you change fonts or faces (bold, italic,...).

Answer 4

em is the size of one character, thus a 2 em letter is twice the size of a 1 em character.