Different CSS units have different uses - there's no great one size fits all. Using px for everything brings about [[a11y]] issues. Using rem for everything is usually confusing, and can sometimes have a negative impact on a11y too.
em - font size of the parent element
rem font size of the root element
em is a good candidate for anything that's related to the size of your type, e.g. padding for text boxes, margin for headings, etc. That way, when the font-size of the text grows, the padding/spacing between components grows also. However, it compounds as font-size is inherited.
rem is good for setting your font-size itself, see [[20220523113342-font-scaling-a11y]] for more details.
Both ch and ex pertain to the (approximate) width and height of one character respectively.
ch is equal to the width of a 0
ex is equal to the height of a x
lh is equal to the computed value of the line-height, which can be great for sizing icons. [[20240819050402-icon-size-lh]]
ch is helpful for restricting max-widths for readability. [[20210201144247-line-length]]
Most of these also have a r-prefixed version which is based on the root element's font, similar to em and rem.
There are many more font/characted related units that can be seen here: https://developer.mozilla.org/en-US/docs/Web/CSS/length.
[[20220104103715-css-viewport-units]]
https://every-layout.dev/rudiments/units/