Page Title

It is a very big confusion amongst programmers with RELATIVE FONT SIZES AND SOME UNITS eg. px,em,rem units.Now i will try to avoid these confusions here...

px unit

Most people start using this px i.e. pixel unit to specify font size. If font size is not specified default paragraph font size is 16px.

Main problem with px unit...

Main problem with this unit is that pixel unit is NOT SCALABLE and making changes in font size on different screens can be challenging.Also px unit is not related to anything So if you want to change the size of for ex. of entire page based on the screen size,You would have to change the font sizes of each element individually.


    html { font-size: 100%; } //usually 16px 
    
    
div { font-size: 16px; } 


div>p { font-size: 14px; }

Here, you can see that the font size is set for each element individually, and they have no relation between each other.

em unit

The EM UNIT IS A SCALABLE FONT SIZE UNIT. It is RELATED TO THE FONT SIZE OF THE PARENT CONTAINER One em (1em) is equal to the current font size. So for example, if the parent element has the font size of 16px than 1em is equal to 16px, 2em is equal to 32px, and so on. Making your design responsive becomes much easier if you use em units instead of px. But, there is one thing that needs to be looked after. When using ems you should BE CAREFUL WITH NESTING. For example, let's say you created a section and set its font size to 2ems. Now, you want to add a paragraph within the section that has a font size of 1em. The paragraph's font size is related to the font size of the section. If the nesting continues, or if it is used on multiple segments of the project, you can quickly lose sight of what is relative to what, and get completely lost.


    html { font-size: 100%; } //usually 16px 
    
    
div { font-size: 0.875em; } //14px


div>p { font-size: 2em; } //28px

In this example, the difference between the px and em units is clear. And, the relativeness of the em unit is clear. Just by changing the font size of the container div, we can see that the paragraph font size updated accordingly.

rem unit

The rem unit is another scalable font size, but unlike the em unit, it is related to the root element (HTML) instead of the parent element. That's where it got its name (root em = rem). This means that, if you use the rem unit on elements, you can quickly change the font size of the entire project, just by adjusting the root font size. This way is FAST, EASY, AND AVOIDS ANY NESTING COMPLICATIONS you might get while using the em unit.


    html { font-size: 100%; } //usually 16px 
    
    
div { font-size: 1rem; } //16px


div>p { font-size: 1.5rem; } //24px

When using the rem unit, it is clear that ALL FONT SIZES ARE RELATED TO THE ROOT FONT SIZE. Both the div and the paragraph font sizes are related to the root, despite the div being the parent of the paragraph.

THANKS TO ALL

relativesizes