October 14th, 2021
Pixels are fixed sizing unit. They do not grow or shrink if the viewport or window changes size.
Rems are relative to the root font size, meaning the font size set on the <html> tag. By default it is 16px, so 1rem = 16px.
Ems are relative to the current font size. If a <p> has a font size of 12px and we add 2em of padding, we can expect the paragraph element to have 24px of cushion all around (2 x 12px). Ems can be tricky because any change to font sizing can cause unexpected resizing.
For a more thorough refresher, check out this explanation of CSS Units.
Bottom Line: I recommend using rem for font size.
It's best to leave the :root font size alone, and define your sizes as proportional to it with rem. Users may require or prefer a different text size in order to consume your site's content.
Users can adjust the size of text in two ways:
Zooming in or out.
This scales everything. It makes the site bigger or smaller.
The text will grow or shrink regardless of how the size is defined - px or rem.
Setting a preferred default font size on their browser.
If they prefer larger text, they can set the default size to 20 or 24 instead of 16px.
This will resize the text properly on your site if you've defined your sizes with relative units - rem, em.
There is a trick to setting the :root size to 10px, in order to make calculating rem sizing easier. It lets you do calculations based on 10 instead of 16. I don't see a particular advantage to this technique because CSS includes a calc function. Let your tech do the math for you and respect the user's default font size.
For a more detailed explanation, please see this excellent article on Accessible Font Sizing
Use rem units for font size, because it has important benefits for accessibility.