How font-size em value work?

Question

Im using em font sizes, which is working fine for everywhere apart from the sidebar.

In the main content the em size is great. If I copy this em size to the sidebar the text becomes larger.

Im using a html/body size of 17px. Then 1.412em to get the size I would like. To see a live link of the sidebar font bigger go to this link. If you look at the twitter feed on the right sidebar you will see its using the same em but you view it a lot larger.

score 3 · Accepted Answer · edited May 23 '17 at 10:33

Using em as measurement value would just not inhert but increases accordingly.

Here's an example:

<div>
  <p>
    <span>foo bar</span>
  </p>
</div>

body{
  font-size: 1em;
}
div{
  font-size: 1.5em;/*1.5em of 1em == 1.5em*/
}
div > p{
  font-size: 1.5em;/*1.5em of 1.5em inherited from div == 2.25em*/
}
div > p > span{
  font-size: 1.5em; /*1.5em of 2.25em inherited from p == 3.375em*/
}

So, I would recommend you to use px as measurement value.

Use ems to make scalable style sheets only.

If you want to know more about px, em, and % please follow this link and this link

score 1 · Answer 2 · answered Sep 11 '14 at 14:18

Don't use em for font-size, that's just about the only place where you should never use it.

1em is the size of an m in the current standard font. You can use this to set paddings/margins, for example between paragraphs or around text blocks, that need to scale according to font size, to cater for people using custom settings at OS/browser level, or just as an easy way to keep a 'good' distance without having to worry about precise pixels.

Scaling a font to a relative size to the m of the current standard font makes no sense at all, unless you want to achieve this effect. If you would want to, it would be more logical to specify font-size:110%, for a single element or block. As a rule, use pt or px to specify font sizes.

How font-size em value work?

2 Answers2