Nowadays, one of the best practices to typography on the web is to use relative units like EM and REM.
So the main question remains, which one should be used? We are going to bring answers and define how to use them to build modular components.
What do we learn? The fact is that the font-size is the same because the parent context is equal to the root context. But the most noticeable difference is the impact on the margin property.
The font-size is relative to its parent context while the other properties of the same element are relative to its own context (to the actual defined font-size itself).
It means that the margin will be changed while the font-size is modified. It offers a kind of “responsive” aspect. On the other hand, the REM margin will always be calculated with the font-size of the HTML element.
In conclusion, we can say that most of time, the EM unit should be preferred for easier responsive design. The REM unit can be interesting while working with a 10px default font-size (HTML defined at 62.5%), it makes calculation time shorter but it should not be used in every case.
Thank you for reading, this is my summary and personal opinion about an article written by Zell Liew.