Can someone explain to me how to use the em unit in css

HTML & CSS
1

I’ve been reading this: https://www.w3.org/WAI/GL/css2em.htm

And I see in this example:

<HTML> 
	<STYLE>
		H1 { font-size: 2em }
	</STYLE>
	<BODY>
		<H1>Movies</H1>
	</BODY>
</HTML>

And the following explanation:

Say, for example, that a sight-impaired user sets his normal font size to 20pt (20 points). If the font size of H1 is 2em - as we recommend - h1 elements will scale accordingly and be displayed in 40 points. If, however, the style sheet sets the font size to be 20pt , there will be no scaling of fonts and the size of headlines will have the same size as the surrounding text.

What I don’t understand is the h1 will be 2x the size of what? Where do you specify the width of “M”?

2

It will be 2 times the size of whatever the font-size of the parent is. If none of the parents have any font-size defined then it will be 2 times the size of the default UA (user agent) setting. Generally (though historically not always) the default setting in browsers is 16px but this of course may be changed as in the example where a sight impaired reader has changed their default via their browser settings to a much higher size.

So assuming the h1 is not nested in a parent with a different font-size then 2 em would make it 32px unless the user has changed the size or the browser has a differing default. The main point being that in using ems you don’t disrespect the user and your font-sizes are then based on what they want their default to be.

Ems have compounding issues and if you nest em elements then the measurement compunds and gets bigger or smaller each time. That’s why these days its better to use rem for font sizing as that is always based on the root (html) element and not on the immediate parent.

3 Likes
3

Ahh that makes sense! So if I want to set a DIV with a 1em monospace font I have to set it in it’s parent, which in this case would be ?

4

We also have a number of articles dedicated to this topic here, on SitePoint - http://www.sitepoint.com/understanding-and-using-rem-units-in-css/ - this one by yours truly and there are a number of further references inside.

1 Like
5

Not exactly, but close.

The calculated size of “em” is based off of the font-size of it’s parent.

For a contrived example, if you have

div {
  font-size: 2em;
}

nesting would have this effect

<div>
  <p>this is 2x1 = 2 em</p>
  <div>
    <p>this is 2x2 = 4 em</p>
    <div>
      <p>this is 2x4 = 8 em</p>
    </div>
  </div>
</div>
3 Likes
6

Not exactly, but close (as @Mittineague said )

You would not set the size of the font in the parent container, instead, you would set the size of the font relative to the size of the font in the parent. In terms of font sizes, you can think of ems as percents. 1em = 100% of the parent’s font size, .5em = 50%, 2em = 200%, etc.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.