Understanding different CSS units was something I struggled with for a long time. Not sure why, it seemed overly complicated and I couldn’t be bothered to actually take the time and understand how each of them work.
That being said, at some point I realised using px is an outdated technique and it was time I updated my approach and reap the benefits of using responsive units such as em or rem. Granted, it was a great decision and I wouldn’t ever go back to ONLY using PX!
So what are these units and how do they work?
Pixel (PX) is a commonly used CSS unit on websites. It is not scalable, as it is an absolute unit. Change in the value of another element does not affect the value of absolute units. The value assigned is fixed irrespective of the user setting.
Element (EM) and Root element (REM) are responsive units interpreted into equivalent px unit by the browser. They are relative units. Change in the value of the parent or root element affects the value of relative units. They scale with the device. So, what makes the two different? The difference lies in how the values are derived by the browser. To view the computed values, open the Chrome Developer Tools and navigate to the Computed tab.
The computed pixel value of em unit is relative to the font size of the element being styled. This is also affected by inherited values from the parent elements unless it is explicitly overridden by a PX unit which is not subject to inheritance.
The computed pixel value of rem unit is relative to the font size of the root (HTML) element. This is however affected by the font size setting on the browser as a result of inheritance unless it is overridden by a PX unit which is not subject to inheritance.
How to calculate PX from REM
A basic and most common example: html font-size is set to 10px, paragraph is set to 1.6rem – 1.6rem * 10px = 16px.
Setting a root font-size of 10px is the most common scenario when I see people using REMs. It allows for a quick conversion between pixel values to REM values simply by dividing the number by 10.
While REMs certainly have their uses, I’m willing to bet that most people use REMs because they are seen as cooler than pixels. I rarely see a project where someone actually changes the root HTML font-size depending on screen size; and rightfully so. Unless you’ve got a very typographically heavy design, you’re unlikely to want to scale everything at once.
So… When Should You Use One Unit Over Another?
Ultimately, there isn’t a perfect answer for this question. In general, it is often best to choose one of the relative units over PX so that your web page has the best chance of rendering a beautifully responsive design. Choose PX however, if you need to ensure that an element never resizes at any breakpoint and remains the same regardless of whether a user has chosen a different default size. PX units ensure consistent results even if that’s not ideal.
Here’s also a useful video that talks about some general guidelines in terms of choosing the right unit for your specific situation: