How to set em to 10px for complete website

Question

I am creating a template for responsive website. I learned that em is good to use in responsive design.

But problem is that I set the body font-size to 62.5% but when I am using p,span and other elements font-size like 2em than 2 em is different from 20px. according to my default font-size it should be 2em=20px anywhere in the body as 62.5% overrides default 1em=16px to 10px.

Please suggest what I should change so that in whole body whenever I set font-size of any element to 2em then it would be same a 20px.

Answer 1

BODY {font-size:62.5%}

This takes 16px down to 10px. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc.

.element {  
    font-size: 20px;  
    width: 4em;  
    height: 4em;  
} 

Then that means that the width and height of the element (defined here as 4em x 4em) would compute to 80px x 80px (20px * 4 = 80px).

Read 1 Read 2

Answer 2

You can't. Use rem instead. It refers to the font size of the root element.

Answer 3

It might be the issue that your font size inherits from any parent tag...

Answer 4

You cannot. The em unit equals, by definition, the font size of the element or, for font-size setting alone, the font size of the parent element.

The conclusions depend on what you really want to do, which is not clear from the question. If you want specific sizes in pixels, using the px unit (with all its vagueness). If you want adjustable sizing, so that you or the user can easily change the basic font size and have all other font sizes scaled accordingly, use consistently the em unit or the % unit, with due consideration of element nesting. For example, use font-size: 2em only when you want the font size to be 2 times the size of the parent element’s font size—using a different value if you want a a different ratio.