Why em instead of px?

Question

I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in c

Answer 1

Pixel is an absolute unit whereas rem/em are relative units. For more: https://drafts.csswg.org/css-values-3/

You should use the relative unit when you want the font-size to be adaptive according to the system's font size because the system provides the font-size value to the root element which is the HTML element.

In this case, where the webpage is open in google chrome, the font-size to the HTML element is set by chrome, try changing it to see the effect on webpages with fonts of rem/ em units.

If you use px as the unit for fonts, the fonts will not resize whereas the fonts with rem/ em unit will resize when you change the system's font size.

So use px when you want the size to be fixed and use rem/ em when you want the size to be adaptive/ dynamic to the size of the system.