🚀

font-sizeの「相対値」についての考え方

に公開
CSS
font
学習
メモ
tech

はじめに

font-size の 「相対値」 の考え方について、備忘録としてここに書こうと思います。
※参考にした記事では、「絶対値」についても書かれています。とても参考になりました。

相対値とは？

相対値とは、フォントサイズを他の要素のサイズに関連付けて定義する方法です。
親要素やルート要素（HTML要素）のフォントサイズに基づいて決まります。
主な相対単位には em , rem , % , vw・vh などがあります。

em：親要素に指定・継承されている文字サイズを基準とした単位です。

rem：ルート要素（html要素）で指定されている文字サイズを基準とした単位です。多くのブラウザでは、ルートの文字サイズが標準で 16px で設定されているため、1rem = 16px として計算されます。

%：割合を表す単位です。幅、高さ、余白、位置などのサイズを親要素を基準として相対的な割合で指定します。ブラウザ幅が変動しても指定した割合を維持したまま伸縮する状態にできます。

vw・vh：ビューポートサイズを基準とした単位です。100vw でビューポートの幅いっぱい、100vh でビューポートの高さいっぱいを表します。

相対単位を使用することで、テキストサイズはコンテンツやデバイスのサイズに応じて動的に変化するので、レスポンシブデザインに長けています。
さらに、相対単位はブラウザのデフォルト設定やユーザーのアクセシビリティ設定に対応しやすいため、ウェブアクセシビリティを向上させるのに役立ちます。

「rem」を主に使うところ

  • 基本的に大きなブロックの font-size には rem を使って文字サイズを指定。
  • 上下の margin など文字周りの余白も rem で組む。

rem を使用するメリット

ルート要素（html要素）で指定されている文字サイズを基準とした単位なので、ブラウザの文字サイズ変更機能を妨げません。なので、ブラウザの文字サイズ変更機能をユーザーが自分好みのサイズに設定できるメリットがあります。

文字周りの余白も rem で組む？

ブラウザの文字サイズが意図して拡大されたり、大きくなった時に、文字の上下の余白が小さいまま（元のサイズ）だと視認性や可読性が悪くなるため、上下の margin など文字周りの余白も rem で組みます。文字サイズが大きくなったらそれに応じて余白も確保するように、上下の margin や、視認性や可読性に繋がる余白は rem で指定するよう心がけます。

「em」を主に使うところ

  • 大きなブロックの中で登場するインラインの要素には em を使う。

例えば、small 要素なんかには em を使います。small 要素は細目や注釈を表す要素ですが、多くの場合 p 要素や、li 要素などの文章の中の一部として使うことが多いです。

例えば、以下のようなHTMLがあるとします。

<ul>
  <li>
    リスト項目1
    <small>これはリスト項目1の説明です。</small>
  </li>
  <li>
    リスト項目2
    <small>これはリスト項目2の説明です。</small>
  </li>
  <li>
    リスト項目3
    <small>これはリスト項目3の説明です。</small>
  </li>
</ul>

そして、li 要素の文字サイズも小さかった場合、

li {
  font-size: .75rem; /* 12px */
}

small {
  font-size: .75em; /* 12px × 0.75 = 9px（10px） */
}

このように、small 要素の font-size には em を指定することで、「親要素に指定・継承されている文字サイズを基準とした単位」 にできます。親要素の大きさに応じて文字サイズが変わってくれるので、このようなケースに em はとても役立ちます。

「vw」を主に使うところ

  • メインビジュアルのキャッチコピーなどの大きな文字

なので、ブラウザの文字サイズ変更機能を必要とせず、ブラウザ幅（ビューポートサイズ）に応じて変化させたい箇所に関しては vw が適してると言えます。

さいごに

結局は、その時々で状況に合わせて使い分けるのがベストなんだと思います。
ただ、なぜこの単位を使うのか？ちゃんとした意図を持って使用することが大切だなと感じました。

参考記事

https://shibajuku.net/font-size-still-relative/

Discussion