While working with CSS one inevitably comes across confusing terms like rem and em, they are flexible units and one can easily get confused where to use either one of them. So, let’s start by explaining each one of them and then we will compare these two and see the differences and similarities.
Both rem and em are called ‘flexible’ because they are scalable units of measurement which are translated by the browser into pixel values, depending on the font size setting. 1em or 1rem could be anywhere between 16px to 160px depending on your browser settings.
REM & EM
Both these units gives the developer flexibility in the designs, and ability to scale elements up and down rather than being limited to only fixed sizes. Developers use this to make their designs more responsive, give control to browsers to the scale of websites.
Both rem and em provide similar functionality and work and this makes choosing between the two confusing and in order to choose successfully one over the other one must understand the difference between them.
Difference between REM and EM
The main difference between em and rem is how the browser determines the px value they translate into. Understanding this subtle difference is the key when choosing between the two.
How the browser translates
remvalues :
In rem units, the pixel size that they translate to depends on the font size of the root element of the page, i.e. the size of the html element. Then the browser multiplies the rem unit which the developer specified with the pixel value to root html element in order to get the pixel value of the new element.
For example, if the root html element has a value of 16px then the the value of 10rem units is 16 x 10 = 160. this helps in increasing the scalability of of the design.
How the browser translates
emvalues :
In em units, the pixel value that one ends up with is the font size the element being styled.
For example, if a div has a font of 20px, 10em will be equal to 200px i.e. 20 x 10 = 200.
Important to know:
Parent element font sizes can effect em values due to inheritance and the value of em can get compounded. Let’s look at this briefly and see how this works in action.
Why Use rem :
The biggest reason for using rem is the consistency that it provides throughout the document regardless of the element inheritance. Using rem one can influence every aspect of site’s layout uniformly.
By using rem units the integrity of the layout is maintained throughout, the abnormal behaviour is reduced using rem .
Why Use em :
The em units allow sizing values to be determined by a font size other than that of the html element.
For this reason, the primary purpose of em units should be to allow for scalability within the context of a specific design element.
Where to use rem:
Use rem where the size of the element is determined by the size of html element and use rem where you want structural uniformity within the document For example: font size, the sizing of the font should remain consistent throughout the document for aesthetic reasons.
Anything that can be made scalable with rem units, should be.
Where to use em:
Use em units anywhere the scale is dependent on the font size of the specific element rather than the root element. generally, em is used where the element that needs to be scaled has no default font sizing.
Elements such as headings, buttons etc. could be scaled using em units.
I hope you enjoyed reading this article and you have developed a good understanding of
remandemunits and how they are different from one another and your are capable of selecting the right unit for your design.PEACE