フォントサイズはpx, %, em, remといった単位で指定できます。この中で「rem」を利用するメリットについて解説します。
4つの単位
まずは、CSSでよく利用される4つの単位について確認します。
| プロパティ | 概要 |
|---|---|
| px | ピクセル単位の指定 |
| % | 親要素を基準にした相対指定 |
| em | 親要素を基準にした相対指定 |
| rem | root要素（html要素）を基準にした相対指定 |
emとremの違い
下記HTMLを例に説明します。
<body>
<ul>
<li>北海道</li>
<li>
<ul>
<li>札幌</li>
</ul>
</li>
</ul>
</body>emの場合
html {
font-size: 10px;
}
li{
font-size: 1.5em;
}「北海道」のfont-sizeは、15px(10px × 1.5)になります。
「札幌」のfont-sizeは、22.5px(10px × 1.5 × 1.5)になります。
remの場合
html {
font-size: 10px;
}
li{
font-size: 1.5rem;
}「北海道」のfont-sizeは、15px(10px × 1.5)になります。
「札幌」のfont-sizeは、15px(10px × 1.5)になります。
emは、直近の親要素を基準とした相対指定なので、HTML要素の階層が深まるにつれて扱いづらくなります。
それに対して、remは、常にroot要素（html要素）を基準としているので扱いやすいです。
remのサポート状況
remの各ブラウザでのサポート状況は http://caniuse.com/#feat=rem で確認できます。
remはIE8でサポートされていません。なので今までremを利用しなかった人も多いかと思います。ですが、マイクロソフトのIE8のサポートは終了しました。なので、今後は頻繁に利用されていくのかと思います。
フォントサイズにはremがおすすめ
PCやスマホなど、デバイスごとに適切なフォントサイズは異なります。
pxやemで指定するとデバイスごとのフォントサイズ調整が面倒ですが、remを使用するとベースフォントだけ変更すればよいのでおすすめです。
フォントサイズの目安
文章のフォントサイズの目安ですが、パソコンだと16pxぐらいは最低必要かと思います。スマホだと手に持って近くで見るため14pxぐらいあればいいのかなと思います。
ちなみに「bootstrap-4.0.0-alpha」の _variables.scss 内では下記のように設定されていました。
$font-size-root: 16px !default;
$font-size-base: 1rem !default;
$font-size-lg: 1.25rem !default; // 20px
$font-size-sm: .875rem !default; // 14px
$font-size-xs: .75rem !default; // 12px
$font-size-h1: 2.5rem !default; // 40px
$font-size-h2: 2rem !default; // 32px
$font-size-h3: 1.75rem !default; // 28px
$font-size-h4: 1.5rem !default; // 24px
$font-size-h5: 1.25rem !default; // 20px
$font-size-h6: 1rem !default;
$line-height: 1.5 !default;
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;ベースフォントを10pxにするとremの計算が楽
デフォルトのベースフォントサイズは16pxです。そのため、pxのサイズを考えながらremを指定するのが面倒です。
そこで、ベースフォーントサイズを62.5%にします。
html { font-size: 62.5%; }するとベースフォントが10pxになるので、下記のようにpxとの対応関係が分かりやすくなります。
- 1.5remであれば、15px
- 2remであれば、20px
ベースフォントを変更できない場合
「bootstrap-4.0.0-alpha」だとベースフォントサイズが16pxです。16pxをもとにremが設定されているため、ベースフォントサイズの変更は避けたいところです。
このように、デフォルトの16pxのままremを利用したい場合には、sassのmixinを利用すると良いかと思います。
@mixin fontsize($size) {
font-size: ($size / 16) * 1rem;
}20pxの大きさになるようにremを指定したい場合、上記mixinを利用して、fontsize(20)とすれば、1.25remが設定されます。ベースが16pxなので「16px × 1.25」で20pxになります。
