%指定とは違った、フォントを可変にするプロパティをご紹介します。

rem(「root+em」)はCSS3から追加された新しい単位で、ルートであるhtmlに指定されたフォントサイズを基準とします。

%指定とは違い、親要素のフォントサイズの継承を気にせず使用することができます。

基準となるサイズを「62.5%」とした場合、「font-size: 1.3rem;」は「font-size: 13px;」に相当します。

remを指定する時、対応していないブラウザを考慮する場合はpxも同時に指定すると良いでしょう。

1
2
3
4
5
6
7
8

html {
  font-size: 62.5%;
}
 
body {
  font-size: 13px;
  font-size: 1.3rem;
}

下記のHTMLソースでは、bodyで指定したフォントサイズがp要素に継承されています。bodyで指定したフォントサイズが継承しない要素に関しては、再度指定すると良いでしょう。

1
2
3

<p>
    rem指定のテキストです。繰り返します。テキストテキストテキストテキストテキストテキストテキスト。
</p>

サンプルを表示しブラウザのフォントサイズを変更する設定で変更した場合、「rem指定のテキスト」のサイズが、大または小に変わります。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12

html {
  font-size: 62.5%;
}
 
h1 {
  font-size: 26px;
}
 
body {
  font-size: 13px;
  font-size: 1.3rem;
}

HTML

1
2
3

<p>
    rem指定のテキストです。繰り返します。テキストテキストテキストテキストテキストテキストテキスト。
</p>