CSS is fine, they’re just different ways of measuring size. There have to be multiple ways because there are different ways of sizing things.
rem is specific to CSS, as are the viewport units mentioned above (vw, and vh which is the height of the viewport). All the rest are just standard units
em is the width of the “m” character. In CSS it is simplified to the font size of the current element.
Because that changes depending on how different parts of the text are sized, rem was introduced which is the base size, and is generally simpler to use. Rather than being the font size of the current element, it is the font size of the root element. So if you don’t set any size, 1rem will be 16px. If you set a font-size of 100px on the html element, then 1rem will be 100px.
% is percent and doesn’t work well for fonts.
px is the size in pixels, but that can change depending on device resolution.
cm, mm, in are self-explanatory.
pt is a point,1/72 of an inch, pc is a pics, 12 points, they are standard typographic units for print media. Not used in CSS very much at all.
And it supports ch (width of a “0” character) and ex (height of an “x” character) but they are not really used. Again, these are typographic units.
Title is 100.
Other text is 60.
60 is the base size.
100 ÷ 60 = 1.66666…
60 × (100 ÷ 60) = 100
1 × (100 ÷ 60) = 1.666666…
Well it’s just easier, it’s nothing to do with code. Start from a common size, then size relative to that, rather than starting with an uncommon size and trying to figure out the maths from there.