cssフォントサイズの指定の違いについて

cssのフォントサイズの設定で使う物は、大きく分けて2つです。
1、絶対値：10pxと決めれば10pxになります。
2、相対値：親要素のサイズによって変わります。

1、絶対値：px
2、相対値：%,em,rem,

1、のpxについてです。
これは、親要素などに関係なく指定した要素の文字サイズを変化させます。

2、相対値
・%:親要素のfont-sizeを基準にフォントサイズを変更します。
例：css

html {
  font-size: 32px;
}

h1 {
  font-size: 2em; /* -> 64px; */
}

span {
  font-size: 0.5em; /* -> 32px; */
}

・em:これも同様に親要素などに関係なく指定した要素の文字サイズを変化させます。
例：css

html {
  font-size: 32px;
}

h1 {
  font-size: 200%; /* -> 64px; */
}

span {
  font-size: 50%; /* -> 32px; */
}

・rem(root em):文章のルート要素、つまり、html要素のfont-sizeを基準にします。
例：css

html {
  font-size: 32px;
}

h1 {
  font-size: 2rem; /* -> 64px; */
}

span {
  font-size: 0.5rem; /* -> 16px; */
}

pxだとなぜいけないのか…
ブラウザによって表示方法が変わるからです。
これは、fontのデザインにも当てはまりますよね。それを防ぐのによく使われるのは、google fontですよね。