こんにちは！Office163のあべちゃんです！
フォントサイズの指定方法でよく使われる単位にpx、rem、emがありますね。
今回は「フォントの指定」という視点に限ってこの3つの単位について説明します。
これらについて解説しているサイトはたくさんありますが、それでも案外「なんとなく」で覚えていたりしませんか？
一緒におさらいしてみましょう！

px指定

こちらはまず最初に勉強する単位ではないかと思います。pxは「絶対値」ですね。
これで指定した通りのサイズで表示されるのでとてもわかりやすいですね！
ちなみにブラウザのデフォルトフォントサイズは基本的に16pxです。

See the Pen fontsize01 by TECK-TOPPA (@teck-toppa) on CodePen.

学び始めでは一番わかりやすい指定方法ですが、px指定には注意点があります。

フォントサイズを px で定義すると、ブラウザーによってはユーザーがフォントサイズを変更することができないため、アクセシブルではありません。例えば、弱視の人は、ウェブデザイナーが選んだサイズより大きなフォントにしたがるかもしれません。こうした配慮のあるデザインをしたい場合は、フォントサイズにピクセルを使わないようにしてください。

font-size | MDN Web Docs

先ほど「ブラウザのデフォルトフォントサイズは基本的に16px」と表記しましたが、このブラウザのフォントサイズはユーザーが変更することができます。
ただしpxで指定をしてしまうと、ブラウザで行うフォントサイズの変更が反映されません。
このように、アクセシビリティを意識したサイト制作を行う場合はpxは推奨されていませんので気を付けましょう。

rem指定

ルート要素（html）に指定されてるフォントサイズに対して相対的にサイズを指定します。
htmlにフォントサイズを指定をしていない場合は1rem=16pxということですね。1.25remで20pxです。

See the Pen fontsize02 by TECK-TOPPA (@teck-toppa) on CodePen.

計算めんどくさい！と思うかもしれませんが、早見表を検索してみると便利です。
またhtmlに対してフォントサイズを62.5%で指定したりと使いやすい方法もありますので、remを使用したいと思ったらぜひ調べてみてください。

em指定

emはrem同様相対的に計算されますが、その計算元は親要素のフォントサイズです。

例えばremでは親要素と子要素のフォントサイズは干渉せずそれぞれがHTML要素に指定されているフォントサイズに対して計算されます。

See the Pen fontsize03 by TECK-TOPPA (@teck-toppa) on CodePen.

しかし、emでは親要素に対して計算が行われるので以下のようになります。

See the Pen fontsize04 by TECK-TOPPA (@teck-toppa) on CodePen.

この場合、box02のフォントサイズは
16px × 1.25 × 1.25 = 25pxとなります。

remとemの違いを認識していないと混乱を招くので、この違いはしっかり理解しておくといいかと思います。

まとめ

フォントサイズは他にも値での指定などありますが、今回は代表的な3つの単位に絞ってお話しました。
必要に応じて使い分けられるようになりましょう！

参考サイト：font-size | MDN Web Docs