px

Screen pixel geometries vary wildly so using numbers like 1px is rather vague and inaccurate to how it will be displayed. Using pixels in a layout encourages us to pretend that pixel perfect layouts are possible or even desirable.

For fonts especially pixels should be avoided as you will disregard/overwrite the user's chosen browser font sizes (rather than say, multiplying them).

rem

The units em, rem, ch, and ex present no such issues as they are all relative to the user's selected font sizes. Browsers and systems typically allow the users to adapt the base or body sizes. This can be expressed as 1rem and your paragraph sizes should generally be that size as that's the user's selected paragraph size. Fortunately it's the default value so you do not need to set it.

Headings should generally be larger, 2.5rem for an <h2> is common for example.

Width-based @media queries should generally be avoided. They represent the hard coding of layout reconfigurations, and are not sensitive to the immediate available space actually afforded the element of component in question. Scaling the interface at a discrete breakpoint is arbitrary. What's so special about 960px compared to 959px?

vw and vh

Using viewport units instead will be relative to the browser's viewport size. For example 1vw is equal to 1% of the screen's width and 1vh is equal to 1% of the screen's height. Using viewport units and calc to can create an algorithm whereby dimensions are scaled proportionally, but from a minimum value.

:root {
  font-size: calc(1rem + 0.5vm);
}

The 1rem part of the equation ensures the font-size never drops below the default value (1rem + 0vv = 1rem).

em

The em unit is relative to the immediate context rather than the outer document. If I wanted to slightly enlarge a <strong> element's font-size within an <h2>, I could use em units:

h2 {
  font-size: 2.5rem;
}
h2 strong {
  font-size: 1.125em;
}

The strong inside an h2 is now 1.125 * 2.5rem = 2.53125rem. If you instead used rem inside the strong it would simply override the value instead of scaling it. As a rule of thumb em units are better for sizing inline elements whereas rem are better for block elements. SVG icons are perfect candidates for em-based sizing.

ch and ex

The ch and ex units pertain to the (approximate) width and height of one character. Where 1ch is the width of a 0 and 1ex is the height of your font's x character (also known as the corpus size or x-height).

The ch unit is often used to restrict an element's measure for readability. Since measure is a question of characters per line, ch (short for character) is the appropriate unit for this styling task.

h2,
h3 {
  max-inline-size: 60ch;
}

h3 {
  font-size: 2rem;
}
h2 {
  font-size: 2.5rem;
}