1em is not set as 16px

Question

i'm working on a website where the client wants some titles at 0.875em.

I checked online, and the base em unit should be 16px for modern browsers. Well, if I set the text-size to 1em in chrome developper, it's set at 12px instead of 16px.

Tried setting body{font-size:100%} at the beginning. No luck.

How do I put it back at 16px base?

Thanks!

Answer 1

That is because Chrome's default font-size is 12px. You should set the body and/or html element's font-size to 16px, like so:

html, body {
    font-size: 16px;
}

This is assuming that there's no parent elements that change this font-size though, as em is a relative size to the nearest parent that sets a size. Check into rem if you want an absolutely sized font, however this isn't supported in older browsers so you'll need to provide a fallback.

Answer 2

To address what you describe as client request, set font-size: 0.875em on those titles. It’s odd to want to use reduced font size for headings, but maybe there’s an explanation.

This has nothing to do with your idea of 1em as equalling 16px. The em unit, when used for font-size, stands for the font size of the parent element. Nothing more, nothing less.

You might need to ask the client what they really want.

Answer 3

Fixed the problem.

The font-size in em is additive.

The problem is that if the base is 16px and I set a child to 0.875em, and another child is also set to 0.875em, it's gonna set the size to 0.875em of 0.875em of 16px.

You have to set the immediate parent to the exact size you want. So in my case, set the parent to 16px, to reset. Then the immediate child to 0.875em.