font-sizeはhtml {font-size:62.5%;}でベースを10pxにすると楽!

font sizeの指定の現在の主流はremを使ったものとなっているようです。
ブラウザのデフォルトのフォントサイズが16pxとなっているので、1remの指定で16px、2remで32pxとなるのですが、11pxは何rem?
とかすぐには答えが出てこないので、いつも調べることになるんですよね〜
そんな悩みを解決するのがこちら!

html {font-size:62.5%;}

htmlのデフォルトのフォントサイズを62.5%にしてベースを10pxにすることによって、例えば11pxなら1.1rem、22pxなら2.2remといちいち表とか調べたりしなくてもfont sizeの指定が簡単に出来るようになります。

emと違って入れ子になっているとフォントサイズが変わってしまうなんてこともなく、あくまでもベースとなるフォントサイズからの計算となるのでわかりやすいですね〜

一応、remに対応していないブラウザを考慮する場合は

p {
font-size: 12px;
font-size: 1.2rem;
}

というように、先にpxで指定しておく形にしておけばOK!

ベースのフォントサイズの%表

例えば上記のhtml {font-size:62.5%;}の指定で作成したページで、ベースのfont sizeを12pxの75%とすれば、全体的に少しフォントサイズを拡大することが出来る。

10px 62.5%
11px 69%
12px 75%
13px 82%
14px 88%
15px 94%
16px 100%
17px 107%
18PX 113%
19px 119%
20px 125%