rem is relative to the root, em is relative to the parent
Both units scale, but they scale against different things. One rem is always the font size of the <html> element — 16px unless something changed it — no matter how deeply nested the element is. One em is the font size of the element’s parent, so its meaning changes as you move down the tree.
The compounding problem
Because em is relative to the parent, nesting multiplies. A list styled at 0.9em inside another list at 0.9em renders at 0.81em, and a third level at 0.729em. This is the classic bug that produces mysteriously shrinking text several levels deep. rem does not compound, which is why it became the default for type scales and spacing, with em reserved for the cases where you actively want a value tied to the local font size — padding inside a button, for example, so it grows with the label.
Why rem matters for accessibility
A user who sets a larger default font size in their browser is changing the root. Anything sized in rem responds to that; anything hard-coded in px does not, and stays small no matter what the reader asks for. This is the strongest practical argument for rem-based typography, and the reason WCAG’s resize requirements are far easier to satisfy with it.
Points, and where they still apply
A CSS point is defined as 1/72 inch, and a CSS pixel as 1/96 inch, so 12pt is exactly 16px regardless of the actual display. Points belong to print stylesheets; for screens they carry no advantage over px and are best avoided, though they are shown here because design tools and PDFs still use them.