1em is not set as 16px

css font-size em
Elggetto picture Elggetto · Sep 9, 2013 · Viewed 12.4k times · Source

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

George Yates picture George Yates · Sep 9, 2013

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.

Related questions

Responsive font size in CSS

I've created a site using the Zurb Foundation 3 grid. Each page has a large h1: When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for …

Read More
What is the em font-size unit? How much is it in pixels?

I want to know what the em unit is, and how much 1em is when converted to pixels (px). I also read somewhere about some IE bug, to overcome which body font-size should be set to something, but couldn't follow …

Read More
Why font size does not change?

I want to set font size with em, not px. Here is my code: <style type="text/css"> body{ font-size: 62.5%; } div{ font-size: 1.2em; } </style> <body> <div>hello world</div> </…

Read More