今回はfont-sizeを%指定するときにちょっと便利（かもしれない）font-sizeの指定方法をご紹介します。
以前の記事で先輩がfont-sizeについて書いていますのでぜひこちらも御覧下さい。
以前の記事で先輩はこう書かれています。
(bodyに)75%に指定すると、(サイトの基準が)12pxのフォントサイズになり、この大きさを基準にし、さらに85%にすれば、約10px、120%にすれば約14pxです。※(〜)は私が足しました。
ただ、この文章内の『約』が示す通り正確なフォントサイズではありません。
ほとんどのブラウザでデフォルトの文字サイズは16pxになっていますので、
先輩の書かれた通りにfont-sizeを指定すると
16px × 0.75 × 0.85 = 10.2px
16px × 0.75 × 1.20 = 14.4px
となります。
ブラウザによっては小数点以下も反映されたり、line-heightの値にも影響します。
そこでなるべく小数点以下を含まない（もしくは無視できるほど小さい）値まで細かくfont-sizeを指定する必要がでてきます。
16px × 0.75 × 0.84 = 10.08px
16px × 0.75 × 1.17 = 14.04px
こんな感じです。
ただ、いちいちこんな計算していられませんよね。
というわけで一覧表を用意してみました。
基準フォントサイズ:12px (16px × 75% = 12px)
| 目標サイズ | 8px | 10px | 12px | 14px | 16px | 18px |
|---|---|---|---|---|---|---|
| 指定% | 67% | 84% | 100% | 117% | 134% | 150% |
| 実際のサイズ(px) | 8.03333px | 10.0833px | 12px | 14.0333px | 16.0833px | 18px |
おまけで基準サイズが14pxの場合もご紹介します。
基準フォントサイズ:14px (16px × 87% = 14.0833px)
| 目標サイズ | 8px | 10px | 12px | 14px | 16px | 18px |
|---|---|---|---|---|---|---|
| 指定% | 57% | 71% | 86% | 100% | 114% | 128% |
| 実際のサイズ(px) | 8.03333px | 10px | 12.1167px | 14.0833px | 16.05px | 18.0333px |
※目標サイズをギリギリで超える%を指定しています。
いかがでしょうか。
私の場合、よく使う10px〜14pxあたりの%を覚えて使っています。
基準サイズが12pxのサイトで一回り小さくしたいときは84%、
基準サイズが14pxのサイトで一回り大きくしたい場合は114%、といった具合です。
