Emsを使ってフォントサイズを変更する
Webページを構築するとき、ほとんどの専門家は、ems、exs、percentage、またはpixelsのような相対的な尺度でフォント（実際にはすべて）のサイズを設定することを推奨します。 これは、誰かがあなたのコンテンツを見る可能性があるさまざまな方法すべてを本当に知っていないからです。 絶対的な尺度（インチ、センチメートル、ミリメートル、ポイント、またはピクカ）を使用すると、異なるデバイスのページの表示や読みやすさに影響を与える可能性があります。
また、W3Cはサイズにemを使用することを推奨しています。
しかし、どのくらいの大きさはエムですか？
W3Cによると、
"は、それが使用されている要素の 'font-size'プロパティの計算値に等しい。例外は 'font-size'プロパティ自体の値に 'em'がある場合で、親要素のフォントサイズに合わせてください。
つまり、emは絶対サイズではありません。 彼らは彼らがどこにいるかに基づいて彼らのサイズの値を取る。 ほとんどのWebデザイナーにとって、これはそれらがWebブラウザーにあることを意味するため、1emのフォントは、そのブラウザーのデフォルトのフォントサイズとまったく同じサイズです。
しかし、デフォルトのサイズはどれくらいですか？ 顧客がブラウザでデフォルトのフォントサイズを変更できるため、100％確実な方法はありませんが、ほとんどの人はほとんどのブラウザでデフォルトのフォントサイズが16ピクセルであると想定することができません。 ほとんどの場合、 1em = 16pxです。
ピクセルで考える、測度にEmsを使う
デフォルトのフォントサイズが16pxであることがわかったら、emsを使用してクライアントがページのサイズを簡単に変更できるようにしますが、フォントサイズをピクセル単位で考えることができます。
次のようなサイジング構造があるとします。
- 見出し1 - 20ピクセル
- 見出し2 - 18ピクセル
- 見出し3 - 16ピクセル
- メインテキスト - 14px
- サブテキスト - 12ピクセル
- 脚注 - 10px
測定のためにピクセルを使ってそのように定義することはできますが、IE 6と7を使用する人はページのサイズをうまく調整できません。 だからあなたはサイズをemに変換しなければなりません。これはちょうど数学の問題です：
- 見出し1 - 1.25em（16×1.25 = 20）
- 見出し2 - 1.125em（16×1.125 = 18）
- 見出し3 - 1em（1em = 16px）
- 本文 - 0.875em（16×0.875 = 14）
- サブテキスト - 0.75em（16×0.75 = 12）
- 脚注 - 0.625em（16×0.625 = 10）
継承を忘れないでください！
しかし、それだけではありません。 あなたが覚えておかなければならないもう一つのことは、彼らが親の大きさを取ることです。 したがって、異なるフォントサイズの要素がネストされていると、予想よりもはるかに小さいか大きいフォントで終わる可能性があります。
たとえば、次のようなスタイルシートがあります。
p {font-size：0.875em; }
.footnote {font-size：0.625em; }
これにより、メインテキストと脚注のフォントがそれぞれ14pxと10pxになります。 しかし、段落の中に脚注を置くと、10pxではなく8.75pxのテキストになる可能性があります。 自分で試してみて、上のCSSと次のHTMLをドキュメントに入れてください：
このフォントは高さが14pxまたは0.875emです。
この段落には脚注があります。
これは単なる脚注の段落ですが。
脚注のテキストは10pxで読みにくく、8.75pxでほとんど読みにくいです。
したがって、emを使用しているときは、親オブジェクトのサイズを十分に認識する必要があります。そうしないと、ページ上にいくつかの非常に奇妙な要素が存在することになります。