Font-size. Changing .hero a font-size from 25px to 1.25em makes the font smaller. Why?

As the title suggests. Why does the text get smaller if it’s 1.25em?

Well 1.25em is approx. 20px, hence the difference.

Oh. I thought em was only proportional to other font sizes. Does em have an independent value e.g. 16px as 1em?

em is dynamic.

When defining the font-size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven’t set the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em = 32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

I thought that was rem?

Everything’s explained right here:


Thank you very much for your help. It was fast af.

1 Like

This topic was automatically closed after 7 days. New replies are no longer allowed.