理系学生日記

おまえはいつまで学生気分なのか

忍者TOOLS

フォントサイズ指定の単位は `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>
e
e e e e

Chrome の DevTools で確認すると、

  • font-size: 500%: 150px (親である div の 30px x 5)
  • font-size: 5em: 上同
  • font-size: 5rem: 80px (ブラウザでのhtmlの標準サイズ 16px x 5)

になっていることが分かります。 つまり、empercentage は親要素の font-size に対する値である一方、rem は root 要素 (html) の font-size に対する値になっています。

rem の何が嬉しいのか

親要素に依存する場合、デザイン修正で親の style あるいは親タグそのものが変わってしまった場合、その子孫の font-size が影響を受けてしまうというのが em や percentage の問題だと理解しています。 また、タグが複雑な入れ子構造を取ると、相対値の計算は難を極めます。

rem を使うと、htmlfont-size のみを気にすれば良いので単純化できるとともに、変更にも強いと思います。

rem は CSS3 で入ったようですが、その対応状況は以下のとおり。