Introduction to font size units px em rem in CSS

When I start to write CSS styles and come to font sizes, I found 3 units of font sizes. And It's a bit confusing to me about their uses that when to use, where to apply and why should I use.

PX
Pixels are the simplest measure. But there is a trap. Assuming we use pixels throughout the site, we also manage media queries. What happens if the user changes the default font size of the browser (or device)? The font size of the title (say 20px) is still 20 pixels. Therefore, the user's font preferences are not reflected. This is not a good user experience. Therefore, pixels can be advantageous for spacing and design, but they are not suitable for font size. Ems and Rems are in the rescue.

EM
Em is equal to the calculated font size of the main element of the element. For example, if you have a div element defined by font-size:16px, then 1em = 16px for the div and its children.

If font-size is not explicitly defined, the element will inherit from the main element. Inheritance continues with the inheritance between the ancestor and the root element. The browser provides the default font size for the root element.

Here you can see the font sizes we give: 20px to.parent and font-size: 1.5em to.child. The font sizes calculated from .child(#outerChild and #innerChild) are different. #outerChild uses the font size of its parent .parent. Then, the calculated #outerChild font size is 1.5 * 20px = 30px. #innerChild uses its father's font size #outerChild (its font size is 30px). Therefore, the .child nested has a calculated font size of 1.5 * 30px = 45px.

If you want to use em for your organization, you must be careful about your design. When using em in a project, it is best not to explicitly define the font size other than the root element.

Em is very easy to use as a sidebar menu design, you want the submenu items to get smaller.

REM
The rem value is relative to the html root element and not the main element. That is, if the font size of the root element is 16px, then 1 rem = 16px for all elements. If the font size is not explicitly defined in the root element, 1rem will be equal to the default font size provided by the browser (usually 16 pixels).

I prefer to use rem in terms of spacing and font size. Since rem uses the font size of the root element instead of the font size of its parent element.

Suppose font-size: 10px is set to execute the root element of 1rem = 10px everywhere in our web page. Since 1px = 0.1rem, the calculation is easy. But setting the root font size in pixels will be the same as the one I mentioned in the px section.

The solution to this problem is the percentage. Typically, the browser's default font size is 16 pixels. Font size setting: 100% will execute 1rem = 16px. But it makes the calculation a bit difficult. A better way is to set the font size: 62.5%. Because 62.5% of 16px is 10px. What is 1rem = 10px.

Final Verdict:
Ems and Rems solved the problem I encountered when using pixels. Use rem in spacing (margins, padding, etc.) and font size. I use them for the design like menus.