0

In this question: Why em instead of px? in The answer of the best vote up, em is defined as:

em is not an absolute unit - it is a unit that is relative to the currently chosen font size. Unless you have overridden font style by setting your font size with an absolute unit (such as px or pt), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.

Use em when you specifically want the size of something to depend on the current font size.

In my website home page, I have a h1 tag with font-size equals to 2.1 em in the header of the page (the website name) which it seems smaller than h2 tag with font-size equals to 1.9 em. The following screen shot demonstrates the situation using Google Chrome browser:

enter image description here

My question is: What does it mean the current font-size regarded in the em definition? In other word, How could I know that current font-size?

TylerH
  • 20,799
  • 66
  • 75
  • 101
SaidbakR
  • 13,303
  • 20
  • 101
  • 195
  • 1
    The answer cited is misleading, and partly even wrong. Hence the question in the title is misguided. Generally, to get an answer clarified, try to improve the answer(s) to an existing question, rather than spawning a new one. If you have a related, but different, question, please ask it and provide a descriptive title and the actual code you have problems with. – Jukka K. Korpela Apr 24 '13 at 17:13
  • @JukkaK.Korpela It is just a matter of how each one describes the problem or the issue to make it clear as possible as. I respect that you have regarded it as a misguided. I regarded the related question to void any think about my question to be duplicate. I think also that my question may be asked with only seven words "What does current font-size mean in em css unit?" However, in such case, I may see my question closed without answer. Using the previous short question will lead to this question as first suggestion -test it-. – SaidbakR Apr 24 '13 at 18:22
  • I don't see what is misleading or wrong about the em paragraph in the answer cited. – TylerH Aug 23 '22 at 14:26

2 Answers2

4

This means that em is based off of the font size of the closest relative parent. Therefore, the font-size set by the <h2>'s parent must be larger than that of the <h1>'s parent.

So, if the parent of the <h2> has a font-size of 40px, for example, and the parent of the <h1> has a font-size of 20px, 1.9em of the 40px will be larger than 2.1em of the 20px

Read more here to learn about how font-sizing works

Update / Note to consider

If you want to guarantee the size of your fonts throught your page, you should consider using px to set the font-size property. Using px will guarantee that the font-size is absolute, rather than relative which is what using em gets you.

Community
  • 1
  • 1
What have you tried
  • 11,018
  • 4
  • 31
  • 45
  • I use responsive layout so, I prefer em in-order to make font-size proportionality well in all screen sizes – SaidbakR Apr 24 '13 at 14:16
  • 1
    @sємsєм Yes, certain layouts absolutely call for proportionate font-sizes, I agree. – What have you tried Apr 24 '13 at 14:19
  • Px is the absolute laziest unit you could use. Rem would give the OP exactly what they are looking for. – cimmanon Apr 24 '13 at 14:35
  • 1
    @cimmanon I understand that, it was just a friendly suggestion for anyone who may come across the answer. – What have you tried Apr 24 '13 at 14:39
  • This postulates that the question is about `em` in `font-size`, which may well be the case, but the question does not say that, and it is the *only* context where the answer is relatively correct. (It is then correct when “closest relative parent” is replaced by “parent”.) The suggestion about using `px` does not address the question at all, and it is generally bad for accessibility. – Jukka K. Korpela Apr 24 '13 at 19:16
1

Just to add a "baseline" note here, if you set your site's base font size to 100% in your CSS, this equates to roughly 16px in size. You also need to remember that you if you use "em" as your unit of measurement, it will cascade. This means that if you set a font size on a container element, any font sizes set on its children are calculated off of that font-size instead.

For example, let's say you set the site base font size set to 100%/16px. Then you create a container with its own base font size of .75em (roughly 12px, 12px/16px = .75). Then within that container you want to create a heading element that is roughly 24px in height. To determine the "em" value, you need to base it on the font size of the container, not the base site font size. So it would NOT be 1.5em (24px/16px, 16px being the site default font size), but would instead be 2em (24px/12px, 12px being the font size set on the container).

seannachie
  • 137
  • 4