【CSS】お勧めのフォントサイズ指定方法

CSS

CSSでフォントサイズ指定をする際の、お勧めの設定方法。

html  {
  font-size: 62.5%;
}

まず上記のように、 html要素に対して「font-size: 62.5%」を設定、ブラウザの基準フォントサイズが16pxの為、下記の様な計算結果となる。

16 * 62.5 * (1 / 100) = 10

フォントサイズに関しては pxを使用するのはお勧めできない、
・ PC
・ タブレット
・スマホ
など、様々な端末の表示に対応する為、絶対指定のpxでは端末によるフォントサイズの変更ができず扱いづらい。

html要素に上記の設定をした後は、子要素以下はremでフォントサイズを指定。
※ remはhtml要素のフォントサイズを1 とし、相対的にフォントサイズを指定する事ができる。

例えば...
・ html要素のfont-sizeを10pxと指定すると1remは10px、1.5remは15px 【とても楽】
・ html要素のfont-sizeを16pxと指定すると1remは16px、0.9375remが15px 【とても面倒】

フォントサイズの指定はこのようにすると、計算が楽でとても便利！