4

Sizing an element in em does not change with font type like it changes for ex or ch sizing. Even tough different Font types have different sizes of 'M'.

<div id="em1">Font Serif with em as units</div> <div id="em2">Font Sans-Serif with em as units</div> <div id="ex1">Font Serif with ex as units</div> <div id="ex2">Font Sans-Serif with ex as units</div> <div id="ch1">Font Serif with ch as units</div> <div id="ch2">Font Sans-Serif with ch as units</div> body { padding: 20px; } #em1,#em2 { width: 25em; height: 40px; background: orange; margin: 20px; } #ch1,#ch2 { width: 50ch; height: 40px; background: orange; margin: 20px; } #ex1,#ex2 { width: 50ex; height: 40px; background: orange; margin: 20px; } #em1, #ex1, #ch1{ font-family: Serif; } #em2,#ex2,#ch2 { font-family: Sans-Serif; }

Refer to this fiddle for more info. You can notice the different Div sizes for ch and ex with the same width size but different font type, but same is not true for em.

Improve this question
9
  • You're using same font i.e. serif and I can't that you're using different font, so why would it be different? Commented Dec 17, 2014 at 5:09
  • comment/uncomment the font of last rule you'll see it's changing: jsfiddle.net/4p9syvnL/3 Commented Dec 17, 2014 at 5:11
  • @Bhojendra-C-LinkNepal I meant length of div element is not changing, when font type is different. Not font size. Commented Dec 17, 2014 at 5:15
  • I can see div length is also changing... Commented Dec 17, 2014 at 5:21
  • you gave same width:25em for em1 and em2 Commented Dec 17, 2014 at 5:23

2 Answers 2

Reset to default
4

In CSS, all dimensions are related to "absolute length units" (px, in, cm, mm, pt, pc) and defaults to a pixel (which is specified in CSS3 as 1/96th of 1 inch).

The three units you are referencing are font-relative lengths, so you would think that they relate directly to a fonts dimensions, but em's relate differently.

ex and ch are unique to the fonts idiosyncrasies, but em's are measured by the inherited font-size of the element (always an "absolute length unit" - usually referencing a pixel unit).

em unit: Equal to the computed value of the ‘font-size’ property of the element on which it is used (1.2em is 20% greater than the specific or inherited font size... always in an "absolute length unit").

The unit length doesn't change when you change font-family because em's are based on the font size - which is always based on an "absolute length unit". If no font size is specified, the default is 16px.

ex unit: Equal to the used x-height of the first available font, the value of one unit is unique to that font. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that do not contain an "x". I can think of no case where this is useful.

ch unit: width of the 0 (zero) character - as arbitrary as an ex measurement.

http://www.w3.org/TR/css3-values/#absolute-lengths

http://www.w3.org/TR/css3-values/#em-unit

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Please share references where you got the above information. My online search points that em is based on the size of "M" which could be different for different font-family. css-tricks.com/the-lengths-of-css jsfiddle.net/balarajv/tuh83zek/1
Chris' post on css tricks agrees with what i have posted. The em unit was based on the typographers (think printing press) measurement uppercase M character, but in CSS3 is based on an absolute measurement.
1

The em unit, by definition, denotes the size of the font or, more technically, the computed value of the font-size property. It is often said to mean the height of the font, which is correct, properly understood. It is often claimed to be the width of the letter “M”, but this is not true; the width of each letter is for the typographer to decide, and in practice, “M” is generally considerably narrower than the font size, as a simple experiment shows:

<div style="width: 1em; height: 1em; outline: solid red">M</div>

Thus, the em unit depends only on the font size, not the font family, style, etc. It is the font size.

The ex unit is defined to equal the height of lowercase letters without ascenders and descenders. This is really a circular definition; ascenders are things that extend above the x-height. In typography, the x-height is one of the basic properties of a font, a characteristic of font design, and the ex unit is meant to reflect this and be different for different fonts. However, many browsers implement ex as just half of the font size, i.e. equal to 0.5em, making the ex unit rather useless.

The ch unit is defined to equal the width of the digit 0. Its name reflects the idea that this is a reasonable approximation of “average character width”. But in any case, the value of the unit is expected to vary according to the font, and it does.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.