Font Size:em,rem,pixel or percent?

I still remember when I was creating my first portfolio site and was trying to make it responsive,even after creating many media queries I wasnt able to get the desired reponsiveness.I was totally frustrated.

And then I came to know it was because I had used font sizes in pixels.

So, my dear friends,I dont want you to waste your valuable time on such simple things like I did!
So do read till the end.

pixels (px) do not scale.
It is an absolute unit.

Whereas em , rem are relative/responsive units.
They scale according to the viewport.

Change in the value of parent or root element affects the value of relative units.
em should be used for padding,margin,line-height etc.

Okay so before studying em and rem,
Remember default font size of browser is 16px.

Thus  1rem = 16px by default.

USING EM - ELEMENT

For eg.

Style	Computed style
html { font-size:18px; } section { font-size:14px; padding:3em; }	html { font-size:18px; } section { font-size:14px; padding:42px; }

So independent of font size specified in html element em takes the font size of its local element.
And if font size is not defined in its local element then it checks it parent's element.
This is a part of inheritance in em units.
We shall learn more about inheritance later in this blog.

USING REM - ROOT ELEMENT

For eg.

Style	Computed style
html { font-size:18px; } section { font-size:14px; padding:3rem; }	html { font-size:18px; } section { font-size:14px; padding:54px; }

Independent of font size defined in local element it takes the value in the root element i.e. html

EFFECT OF INHERITANCE ON EM UNITS

Inheritance changes the game in em units and also makes it quite complex.

With em the child element inherits the value of its parent and up to its grandparent.

<section class="wrapper">
    Grandparent
    <div class="container">
        Parent
        <div class="container">
            Child
        </div>
    </div>
</section>

Style	Computed style
html { font-size:16px; } .wrapper { font-size:1.5em; } .container { padding:2em; }	html { font-size:16px; } .wrapper { font-size:24px;//16 * 1.5// } .container { padding:48px;//24 * 2 // }

If we want to override the inherited values then we need to expicitly set the unit element to px.

Stylesheet

<section class="page-wrapper">
    GrandParent
    //16px
    <div class="container">
        Parent
        //24 * 1.5 = 36px;
        <div class="container">
            Child
            //36 * 1.5 = 54px;
        </div>
    </div>
</section>

html {
    font-size: 16px;
}
.page-wrapper {
    font-size:24px;
}

.container {
    font-size:1.5em;
}

Here the font size of div with .container class is computed based on its parent element.
The interesting thing here is that the parent and child in the HTML above do not have the same font size irrespective of the fact that they share the same class name.

PERCENT

Use percent specifically when making site responsive.
Also for ease of usage most programmers do the following.

html {
    font-size:62.5%;
}

Thus now 1rem = 10px;

This makes furhter calculations easier.

CONCLUSION

These are just my personal recommendations based on my research and studies.

1. em should be used for padding,margin,line-height etc.
   em for those elements whose properties shall scale with the changing viewport.

2. Use rem for everything else.

3. For changing viewports, use % unit in font size.This makes font size responsive.

Note:
Guys, I have taken reference of this blog.
Sizing in CSS: px vs em vs rem
This is really a very helpful blog!
Do give it a read for more undertanding.

Comments

[Paras 🧙‍♂️]

if 62.5% results in 10px, how does it make the font responsive ? isn't it still fixed until and unless we add media query and change the font size ?

[Prajwal Jain]

Thank You for your response Paras!
Actually, I wanted to tell that, use 62.5 % in media queries in html for font-size.
That way, wherever you had given larger fonts-sizes it will automatically shrink.
Hope this clears the point.

[Paras 🧙‍♂️]

Ohh ... that surely works and I use that way too. Thank youu !! :)