I just found many developers don't know the real use of Font-size. They think all are same and sometime make mistakes. There are multiple units that can be used which can only cause the designer/developer additional headache. In this blog post, we will clarify the usage of those units and any misconceptions.

EM Unit

The em unit is a scalable font size unit. It is related to the font size of the parent container. One em 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, 12em 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% } 
div { font-size: 0.875em; } // 14px 
div>p { font-size: 2em; } // 28px

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% } 
div { font-size: 1.5rem; } // 24px 
div>p { font-size: 2rem; } // 32px

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.

PX Unit

I know you were finding this only that's why this is last coz is the most common and popular unit. Many developers/designers start with using the pixel unit because it gives you full control over the text size. If the font size is not specified, the default size for normal text, like a paragraph, is 16px.

The main problem with using pixel units is that they are not scalable and making changes in the font size on different screen sizes can be challenging.

Also, the px unit is not related to anything. So if you want to change the size of, for example, the entire page based on the screen size, you would have to change the font size of each element individually.

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

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

---

Thanks For Reading 😀 I'm writing an eBook to master CSS ($2) Hope you'll read that too.