フォントサイズ指定の単位は `rem` が良い

以前に書いたとおり CSS の知識がゴミみたいなかんじなので、本を読みつつ MDN と対象しつつ学んでいければと思っています。

で、今日はものすごい基本的なフォントサイズ指定についてなんですが、最終的に現時点においては rem で指定するのが良いのだろうという結論に達しました。

フォントサイズの指定

フォントサイズは font-size プロパティで指定しますが、まずはアクセシビリティに関する推奨事項である Web Content Accessibility Guidelines (WCAG) 2.0 への達成方法を記載した Techniques for WCAG 2.0 を見ると、 font-size に関しては以下の 3 つが記載されています。

要するに、percentage か named font size (larger とか smaller)、あるいは単位として em を使えってことになってます。これらはいずれも、テキストは拡大可能でなければならないっていう原則を達成するためと思われます。

というわけで、単位をつけるんであれば % か em ってことが現時点での W3C の推奨という理解。

percentage と `em`、そして `rem`

で、このうち percentage、em、そして関連している rem についてです。 MDN や CSS Values and Units Module Level 3 を確認する限り、

percentage
- 親要素の font-size に対しての計算値
em
- 親要素の font-size に対しての計算値
rem
- root 要素の font-size に対しての計算値

となります。以下で実際に確認してみます。

<div style="font-size: 10px; background-color: rgba(200, 200, 200, 0.5)">
  e
  <div style="font-size: 30px;">
    e
    <span style="font-size: 500%">e</span>
    <span style="font-size: 5em">e</span>
    <span style="font-size: 5rem">e</span>
  </div>
</div>