First of all, we must understand that there isn’t any best option of measurement unit for all cases, and that’s why this question is mostly opinion-based. But let’s discuss each of the units.
Using px
CSS defines a reference pixel that measures the pixel size on a 96dpi display. On display with a dpi significantly different from 96dpi, the user agent will rescale the px unit so that its size will match the one of a reference pixel.
Pixels are the easiest to use for measurement. However, there is something that we must consider first of all when using it. If you use pixels on your website and there are media queries as well, users will not be able to make the text on your website bigger. So, in this case, it is not good for user experience. Pixels can be good for spacing and layout, but not for font size.
Using em
An em value is equal to the computed font-size of the parent of that element. E. g., if there is a <div> element having font-size: 16px then 1em=16px for the <div> and its child elements. When the font-size isn’t specified explicitly, that element will inherit it from the parent element. This inheritance continues up until the root element. The root element’s font-size is provided by the browser.
Using rem values
The rem values are relative to the root HTML element. If the root element’s font-size: 16px, 1rem = 16px for all elements. If the font-size isn’t defined explicitly in the root element, 1rem will be equal to the default font-size which is provided by the browser.