Topスタイルシートの基本テキスト > 文字のサイズを相対で指定

文字のサイズを相対で指定

アクセシビリティを考慮すると、ユーザーが文字サイズを変更できるように相対サイズで指定したほうがよいと思います。
特に見出しなどは32pxなど大きいサイズで表示されるため、デザイン的にちょっと…ということも。


文字サイズと絶対サイズ

font-size:●●;として設定します。


■相対サイズで指定する単位

  • em 1emは基準となる文字サイズ

  • ex 1exは基準となる文字サイズのXの高さ

  • px ピクセル(※どっちかというと絶対に近い)

  • % 基準となる文字サイズに対する割合

■絶対サイズで指定する単位
  • pc パイカ

  • pt ポイント

  • cm センチメートル

  • mm ミリメートル

  • in インチ

文字サイズを指定する単位は、相対的な大きさを指定するものと、絶対的な大きさを指定するものがあります。

ちなみに推奨されているのは「em」です。
「em」で文字サイズを指定した場合、親となる要素の文字サイズが基準となります。
例えば、大見出し「h1」は、「body」の文字サイズを基準とします。
※ちなみに、「body」はブラウザの標準設定文字サイズ(たいていは16px)です。
「h1」を「1em」とした場合は「16px」、「2em」とした場合は「32px」で表示されることになります。

ブラウザ標準16pxの場合の「px」「em」指定です。
  • h1 32px 2em

  • h2 24px 1.5em

  • h3 18px 1.125em

  • h4 16px 1em

  • h5 12px 0.75em

  • h6 10px 0.625em

「文字のサイズを相対で指定」関連本

Akasa Rira
みつけたきせき