UI Development

PX vs EM vs REM – Which one to use

Hi team,

I will be solving one of the common confusion which every UI developer will face in choosing the css unit to use either px or em or rem.

Basic font-size a browser has 16px or 12pt(points)

PX – PX are older style of designing websites. It’s a absolute measurement of font, will be same to desktop, iPad or mobiles. Best to use for setting the padding, margin, or the width of an element.

EM – It’s font-size basically depends on the font-size of its parent element, suppose if it’s parent element has font-size of 2em, then its inner element also has a font-size of 2em, and if we set the inner child with some other font-size its units depend on parent. Lets get more knowledge with some example.

<div class="parent">
    <p>Parent Element - <span class="parent-font-text">16px</span></p>
    <div class="child">
        <p>Child Element - <span class="child-font-text">32px</span></p>
        <div class="sub-child">
            <p>Sub Child Element - <span class="subchild-font-text">96px</span></p>
        </div>
    </div>
</div>

 

body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #222;
    color: #fff;
    font-family: 'Courgette', cursive;
    width: 1170px;
    margin: 100px auto;
}
.container{
    width: 1170px;
    margin: 0 auto;
}
.parent{
    font-size: 1em; /* font size will be 1em = 1 x 16px = 16px */
}
.child{
    font-size: 2em; /* font size will be 2em = 2 x 16px(parent element font size) = 32px */
}
.sub-child{
    font-size: 3em; /* font size will be 3em = 3 x 32px(child element font size) = 96px */
}

View on code-pen : https://codepen.io/harivishwanath/pen/JVpNeK

 

REM – REM font-size is easily scalable. Its a modern style of designing websites mainly for responsiveness. So first we will set the font-size of root / html element based on that the font-size of * elements will be decided. There is no dependency on parent element font-size. Lets get more knowledge with some example.

<div class="parent">
    <p>Parent Element - <span class="parent-font-text">16px</span></p>
    <div class="child">
        <p>Child Element - <span class="child-font-text">32px</span></p>
        <div class="sub-child">
            <p>Sub Child Element - <span class="subchild-font-text">48px</span></p>
        </div>
    </div>
</div>
:root{
    font-size: 16px;
}
body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: #222;
    color: #fff;
    font-family: 'Courgette', cursive;
    width: 1170px;
    margin: 100px auto;
}
.container{
    width: 1170px;
    margin: 0 auto;
}
@media only screen and (max-width : 480px){
    :root{
        font-size: 20px;
    }
}
.parent{
    font-size: 1rem; /* font size for mobiles will be 1rem = 1 x 20px = 20px */
}
.child{
    font-size: 2rem; /* font size for mobiles will be 2rem = 2 x 20px = 40px */
}
.sub-child{
    font-size: 3rem; /* font size for mobiles will be 4rem = 3 x 20px = 60px */
}

View on code-pen : https://codepen.io/harivishwanath/pen/eoVvwQ

 

CONCLUSION

Depending on the project, the need, you can use rem, em, or pixels. Once you are familiar with your needs and the final goal, it is easy to decide. For smaller scale websites we can use px. But for large scale websites prefer using em or rem

● rem or em units are computed into pixel values by the browser, based on font sizes in your design.

● em units are based on the font size of the element they’re used on.

● rem units are based on the font size of the root or html element

● Use em units for sizing that should scale depending on the font size of an element other than the root.

● Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings.

About The Author