CSSでの文字サイズ指定に潜む各ブラウザからの課題

cssでの文字サイズ指定、迷ったことはありませんか？
私はあります。ほんの今。

……と、対策するのが遅すぎのNは置いといて。

実はこんな問題にまたしても直面したのですが。

文字サイズの単位は
px、pt、em、％など様々です。
私は自分が計算しやすいpxを使っていたのですが

これ……web初期の手法なんですね。

pxだと、ブラウザ機能で文字サイズを変更しようとしても、無視してしまうブラウザ（青いeの文字のあれ）があるようです。
ではemは…と思うと、今度はddだのliだのという入れ子タグのフォントサイズを指定しても、勝手に複利計算されてしまうそうです。
％も同様の上、Nのような数字苦手な人には指定の仕方で混乱しそうな予感しかしません。

そんな中、rem というものを発見。
CSS3なのですが、入れ子タグもフォントサイズを指定できるみたいです。
デメリットは……やはりCSS3なので、対応してくれないブラウザ（青いeの文字のあれ）が存在するということ……。

正解がどこにもないよ！

しかし、限りなく正解に近い逃げ道がありました。

[css]
html {font-size: 62.5%;}
.x-small {
font-size: 0.9rem; /*9px*/
font-size: 0.9em;
}
.small {
font-size: 1.2rem; /*12px*/
font-size: 1.2em;
}
.medium {
font-size: 1.4rem; /*14px*/
font-size: 1.4em;
}
.large{
font-size: 1.6rem; /*16px*/
font-size: 1.6em;
}
.x-large {
font-size: 2.2rem; /*22px*/
font-size: 2.2em;
}
[/css]

IE8以前の入れ子タグ問題は解決していないものの
より多くのブラウザで表現できるという点では、ひとまず安心。
IE6〜8対策としては、入れ子タグ1つ1つに font-size:1em を指定する、ということで。

【ハートブレーン】https://blog.heart-kokoro.net/