フォントサイズの指定については、色々と悩むところが多いものです。
px指定にするか、emで指定していくか、はたまた、%で指定するか…など。

それぞれについて、ざっと解説すると。

・px

一般的な指定単位で、pxでの絶対値での指定方法になります。

・em

親要素のフォントサイズに影響を受ける相対値の単位です。
親要素の指定が、16pxであれば、1em=16pxとなります。

・rem

親要素のフォントサイズではなく、htmlのフォントサイズが基準となる相対値の単位です。

・%

emと同じで、親要素のフォントサイズに依存します。

---

ビューポート単位(vw、vh、vmin、vmax)

ビューポートのに基づいて変化する指定方法です。
基準はビューポートの1/100なので、例えば、ビューポートが600pxの場合は6pxに、1000pxの場合は10pxに、vwの場合だと100vwは横幅いっぱいという事になります。

小さい画面では小さく、大きい画面では大きく見せれるので便利ではあるのものの、実際に設定したいpx数とかけ離れた数値になったりし、思いの外読みにくくなる事が多いので、他の指定方法と組み合わせたりして使う必要があります。

使用例

まず、htmlに指定した62.5%は、ブラウザのデフォルトである16pxに対して62.5%とする事でhtml要素のフォントサイズを10pxに指定することになり、他の要素のfont-sizeの計算を簡単にする手法です。
たとえば、30pxにしたい時は3rem、16pxにしたい時は1.6remというように、pxを使わず設定することが可能です。

---

9行目の最初のフォントサイズの指定は、vwやcalc()が未対応の場合の補填です。
10行目のcalc()の部分ですが、30px – 36pxで可変になるという計算をしています。
そして、後半の割合の計算は、下記サイトを参考にしています。

ビューポートの幅の中でテキストを拡大/縮小する為のフォントサイズ計算

参考サイトでは、htmlの最初の設定がされていない状態なので、少しややこしく感じますが、見比べれば、使い方がわかってくると思います。

---

12行目からは、画面のサイズを大きくしていくと、ひたすら大きくしてしまいますので、1200px以上の場合は、36pxで固定としています。
17行目からは、640px以下の場合の指定になりますが、その時の文字数などで、調整する必要がなければ、不要かもしれませんが、参考までに。