文字サイズの基本
Webサイトをデザインする上で、タイポグラフィ(文字表現)は大切です。特に文字の大きさはとても重要な要素です。OSやブラウザが標準設定ならば、通常の文字サイズは16pxです。CSSによって文字サイズを変更する場合は相対的な単位であるemやremを使って指定します。これでOSやブラウザの拡大縮小設定に応じた文字サイズを実現出来ます。
文字の大きさで役割を伝える
その文字の持つ役割ごとに文字サイズを変化させることも大切です。見出し(<h1/>など)は通常より大きくすることで、ひと目で文書構造が把握し易くなります。見出しも<h1/>から<h6/>に従って徐々にサイズが小さくなっていると、より親切です。https://typescale.comは好みの比率(Scale)で文字のサイズ感を確認できるサイトです。
Fluid(流体的)なスケール変化
CSS上は同じ文字サイズであっても、画面の大きさに依っては小さく見えたり、大きく見えたりすることがあります。そんな時は画面幅に応じて文字サイズを滑らか(Fluid)に変化させると良いです。https://utopia.fyiではCSSのclamp()を使った線形なFluidスケールを自動計算してくれます。この手法は文字サイズのみならず、要素間の余白や、要素自体の大きさ指定に利用しても効果的です。
フォントファミリ
フォントによって、その文章の印象が大きく変わります。多くのブラウザでは標準で明朝体(Serif)が利用されます。明朝体は手書きの印象を再現しているため、まとまりで文章を認識しやすいと言われていますが、解像度が低い画面の場合うまく再現できず荒々しく見辛くなってしまう場合もあります。ゴシック体(Sans-serif)は幾何学的なため、ディスプレイとの相性は良いです。適材適所で表現してみましょう。
ちなみにわたしは最近Interフォントが好きです。
深堀り！Fluid Scale
utopia.fyiがどのような計算式を利用しているか。GitHubのソースコードを見に行くとFluidスケール専用にSCSSのfunctionが定義されていました。想像通り、文字サイズの最小値$ S_{min} $と最大値$ S_{max} $、画面幅の最小値$ W_{min} $と最大値$ W_{max} $を平面上の二地点とした傾き(slope)と切片(intercept)を算出する式でした(y = ax + b でお馴染み！)。
考え方からすると文字サイズをY軸、画面幅をX軸とした平面が分かりやすいです。clamp()も、最小値はrem単位の$ S_{min} $、最大値はrem単位の$ S_{max} $、推奨値はrem単位の切片とビューポート単位の傾きを足したものとなっています。
切片である最小値から、画面幅が広がるに連れて文字サイズも最大値へ向かっていく様子が、この数式からも読み取れます。
200
200
72
72