📐

font-size: 62.5%; vs font-size: 10px;

2021/08/31に公開

html {
  font-size: 62.5%;
}

62.5%ってなんの数字？

もう見慣れた。そんな数字だとは思いますが、この62.5%という数字、一体何者でしょう？
この数字は、ブラウザのフォントサイズ16pxを10pxで表すための数字です。

10 / 16 * 100 = 62.5

でもなんでわざわざ%で表記するのでしょう？直接10pxって表記すれば良くない？
私もそう思ってました。

ブラウザのフォントサイズというのはユーザーの設定で書き換えることが可能な数値です。
初期設定の多くは16pxとなっている為、あまり気にすることがありませんでした。

試しに、ブラウザのフォントサイズを20pxにして検証してみました。

ブラウザフォントサイズ20px + html { font-size: 10px }

ブラウザフォントサイズ20px + html { font-size: 62.5% }

62.5%の方がブラウザのフォントサイズが考慮されたフォントサイズになりました。

今まで、なんとなくで使っていましたが、ちゃんと理解した上で使うことで以下のように使い分けができそうです。

これから携わる案件で、font-sizeを指定する際には是非参考になれば幸いです。

皆さんは余白の指定にどの単位を利用していますか？私はremでした。

ただこのrem、今回話した通り。
font-sizeを10pxに固定しない場合、変動します。
そしてレイアウトがガタガタに崩れます。

私は思いました。余白はpxがいいかもと...

皆さんのご意見お待ちしております。