font-sizeの指定はremで

投稿日:

文字の大きさ(font-size)の指定には悩ませられますが、

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6em;
}

と、全体を指定しておいて、個々にサイズを変える箇所は、それぞれの要素やクラスにcss3から採用されたremという単位で指定し直します。

この例では、html要素を62.5%。ブラウザデフォルトのhtml要素のフォントサイズは16pxなので、html要素に1.6emを指定すると、10pxとなります。body要素に1.6emを指定すると16pxとなります。なおbodyに1.6remではなく1.6emとしているのは、chromeのバグ対策です。

h2 {
  font-size: 2rem;
}

emは親要素に対する相対指定ですので、親要素に影響を受けますが、remはルート(基本的にはhtml要素)を基準にした相対指定のフォントサイズになります。例えば、親要素が2emのh2要素に2emを指定すると結果は親要素の2倍のフォントサイズになってしましますが、remはルート要素を基準にしますので、意図したとおりのフォントサイズ20pxになります。

remに対応しないブラウザもほとんど無くなりつつあるので、こちらを使用しています。

こちらの記事も一緒に読まれてます。