全体のフォントサイズを調整するために使う定番

html{
	font-size: 62.5%;
}

ブラウザの標準フォントサイズを16pxから10pxに変更し、以降のフォントサイズをremで指定しやすいようにしている。これなら1remは10pxになるので、わかりやすい。

レスポンシブ環境で、テキストサイズをあんまり細かく指定するのが億劫なので、最近はvwを加味して表示する方法をよく使う。

html{
	font-size: calc(62.5% + 0.6vw;);
}

これだと、10px + ビューポートの幅の0.6%分が大きめになるので、すごく幅が取れるときには大きめに、小さいときにもそれなりに、みたいなサイズになる。

私としては（年齢的に）大きい文字はウェルカムだけど、画面をパッとみた時の情報量が少なすぎるのもちょっと…というのがあって、個人的にこの辺りが落とし所かと思う。フォントサイズは本当はユーザーが自由自在にできるのが一番だけれども、綺麗に並んでいるテキストの方が読む気が起きるので、特に大量のテキストを読ませたい時のバランスとしては、こんなかなあと。印刷屋目線か。

*, *::before, *::after {
	box-sizing: border-box;
}

あとこれ。paddingとborderをwidthやheightに含めるおまじない。うっかり囲みを増やし、ボックスが全体のレイアウトからもりもりはみ出してしまったりするので、ウカウカしている私にはぴったりである。