emを使用したフォントサイズ指定

ブラウザのデフォルトサイズは多くは16px。
BODY {font-size:62.5%}
で、10pxに設定される。
1em は 10px, 0.8em は 8px, 1.6em で 16pxとなり、pxで考える際にわかりやすくなる。

...

...

...

...

#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}
こういうレイアウトがあるとして、#navigationと#side_bar は 10px, #main_contentは12px、#footerは9pxでそれぞれの
テキストが表示される。

#main_contentは12pxに設定されていて、その中の要素は,それをもとに計算される。

H1 {font-size:2em} /* displayed at 24px */
H2 {font-size:1.5em} /* displayed at 18px */
H3 {font-size:1.25em} /* displayed at 15px */
H4 {font-size:1em} /* displayed at 12px */

まとめると、まず16pxがデフォルトでそれを10pxに設定する。
16 x 0.625 = 10
子要素/親要素で設定。
child pixels / parent pixels = child ems
12 / 10 = 1.2
しかしこれだと
#main_content LI {font-size:0.8333em}
リストがネストしている場合、どんどん小さくなっていくので、それを防ぐために
LI LI {font-size:1em}
のように設定する。
混乱を防ぐために、あらかじめ設定しておくのが良いだろう。
LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}