`em` is a relative unit that can change depending font-size of the given element while `pt` is an absolute value. the W3C does not recomend using any absolute value such as `pt` for text rendered on screens. only relative values or `px` should be used. [0] I would suggest this very helpful article on the topic, it provides a lot of good info and context on this subject.
Both px and pt (and cm, mm, in etc.) are absolute (in the sense that they don't depend on the current font size, only on the pixel density and scale factor of the display). So there is no reason to prefer px to the other units.
In traditional typography, pt is relative to the size of a font, but in CSS it is just an absolute measurement like px.
The tutorial you link to is wrong, which is weird since it is written by the inventor of CSS! It might be because it is out of date and reflect the original intention of CSS, not how it actually turned out.
Originally, the intention of CSS was that px should correspond to a pixel and pt/mm/in to physical dimensions, so the ratio between px and pt would vary depending on the pixel density. But people started to specify font sizes in px, which meant text would just become unreadably small when high-density displays were introduced. So instead px was redefined as a physical unit rounded to nearest pixel, and the other absolute units defined relative to this.
Historically, the term "em" goes back to the days of printing with metal type, and referred to the width of a capital "M" in the current typeface and point size:
Much terminology have a different meaning in CSS than in traditional typography. For example the em unit does not actually depend on the width of on "m"-letter in the font, rather it depends on the height of the font.
