ウェブサイトで使うフォントサイズ計算表(絶対指定と相対指定)

About CSS

絶対指定(px)のフォントを相対指定(%)でも同じサイズに見えるように調整するには、フォントのサイズ計算を理解しなければならない。

今回は基準値のサイズを px で決めて、% パーセントに置き換えても基準値と同じサイズになるようにフォントサイズ早見表をメモする。

フォント px 基準値と % 置き換え早見表

フォント px をパーセントに置き換えた計算表

基準になるフォントサイズをパーセントに置き換えたらいくつになるのか? すぐにわかるようにした早見表。

おすすめのフォントサイズ

おすすめは「62.5%」をサイト全体の基準フォントサイズすること。

ブラウザデフォルトは 16px=100%

この基準を 16px から 10px にすることで、サイトの相対指定フォント利用が設定しやすくなる。例えば、body に font-size「62.5%」を設定しておくことで、以下の基準フォントサイズが 10px になるので、以下のような計算で簡単に設定していける。

基準フォントが 10px になったので…

  • 100% = 10px 相当
  • 140% = 14px 相当
  • 200% = 20px 相当
  • 1em = 10px 相当
  • 1.4em = 14px 相当
  • 2em = 20px 相当

のようにわかりやすい指定ができる。

フォントサイズの基準を何 px にするかで制作のフォント比率がかわる。

62.5% がなぜ 10px 相当になるのか?

計算式(基準を16pxとして)

16 x 0.625(62.5%) = 10

16px を 62.5% にするということは、37.5% ぶん小さくなるということ。

上記の表はこの計算をいちいちするのが面倒なのでリスト化したものである。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です