In print copy we use pt for font sizes because usually we want a “fixed” size because it is going to be printed out on a piece of paper that we have specified the size of. And in a similar fashion px, are fixed not relative sizes and it means that we have hardcoded the font-size to all of the users of the text on our webpage. This means that no matter whether our users are on a phone, desktop computer or tablet the font size will be exactly the same. Which will more than likely mean the font size will be tiny on a phone device. The end device can’t change the value so if they have set their device to show text at a large size you have said no way I know better and I’m not letting you.

So what is the CSS font best practice or solution?
REM and EM

Rem and Em is a relative unit that many developers use to preserve accessibility.

Rem (root em) stands for “root element’s font-size”

If the default root font-size is 12px. So, if we see a font-size that is 1rem, we are looking at 12px but if a user has set their default root size to be 18px then our 1rem will be 18px not 12px.

Because Rem means root element’s font-size, we can also override the default value by using CSS like this:

:root {
  font-size: 20px;
}

So now you have changed the root font-size, now 1rem = 20px

What if we want to use values on our pages other that other than 18px?

We can get the rem value of a pixels by using decimal options to go up or down sizes. For example, if we want to use a larger font-size we will write font-size: 1.25rem. And if we want a smaller font size we use 0.8rem

But it’s so annoying ?!

Yep, using rem will make the development process longer because we need to calculate the rem value. But this gives some freedom to the user, and we are not messing with the accessibility.

So how do em works?

Em stands for “parent element’s font-size”

Because css is cascading and support inheritance then em will inherit font-size value from the parent element. For example, we have a parent div, and p tag inside:

<div>
  <p>hello work </p>
</div>

<style>
  div {
    font-size: 0.5rem; // 8px
  }

  p {
    font-size: 1em; // ??px
  }
</style>

Because p inherit the parent element’s font-size, so 1em = 8px. This means, that the p will have font-size: 8px.

You can read more on W3Cschools site