CODEWITHSUNDEEP
css
wh0
wh0

Reputation: 279

Why does em font sizing do not change with font type?

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.

Upvotes: 4

Views: 403

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201558

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.

Upvotes: 1

superUntitled
superUntitled

Reputation: 22527

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

Upvotes: 4

Related Questions