CSSには、margin、padding、line-height、font-sizeといったさまざまなプロパティがあります。プロパティでは異なる用途に対応するために長さを指定する単位がたくさんあります。問題は、CSSプロパティに別の単位で同じ値を設定しても、実際に表示される大きさが異なりうまくいかないことあることです。たとえば要素のwidthプロパティやheightプロパティの設定でビューポートの幅や高さを基準にすると、使える単位はvh、vw、vmin、vmaxだけです。
この記事では「長さの単位」と、フォントサイズに適用したときの影響を解説します。
ピクセル単位（px）
ピクセルはサイズを固定する単位です。1ピクセルはユーザーの画面ではドット1個で表示します。とはいえ、デバイスのピクセル密度はさまざまなので、標準的なデバイスの4倍のピクセル密度のデバイスでは、ドットのサイズは約4分の1になります。参照ピクセルでCSSのピクセルサイズを計算ればこの問題を回避できます。参照ピクセルは「ピクセル密度96dpiのデバイスにおいてユーザーの腕の長さ（28インチ相当）の距離から見た1ピクセルの視角」として定義されます。参照ピクセルの定義によると1ピクセルは約0.26mmです。
font-sizeをピクセル単位で設定したWebページは、メンテナンスが大変なばかりかユーザーフレンドリーでもありません。大きなWebサイトの再設計ですべてのフォントを変更するのは悪夢です。いろいろな画面サイズに対応するには、すべてのfont-sizeをブレークポイントで調整する必要があります。ユーザーがブラウザーのフォントサイズ設定機能でテキストを拡大縮小することも不可能です。
ピクセルでfont-sizeを設定したときの計算値を見てみます。続くセクションで参照用に使うマークアップは次のとおりです。
<div class="container-box">
This text is directly inside the parent div element.
<p>This is the first paragraph of our container.</p>
<p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
<p>I have also included a link to SitePoint as a direct child of the containing div element.</p>
<a href="https://www.sitepoint.com/">A link to SitePoint.</a>
</div>すべての要素のfont-sizeプロパティをピクセル単位で設定します。
div {
font-size: 20px;
}
code {
font-size: 18px;
}
p, a {
font-size: 22px;
}デモを見てください。各要素のfont-sizeは設定どおりのピクセル値です。これは要素のネストとは無関係です。たとえばリンク部分のfont-sizeはどちらも22pxです。ブラウザーでテキストサイズを変更しても、反映されません。
このように柔軟性に欠けるため、要素のfont-sizeの設定にはピクセル単位を使わないことをおすすめします。
Em単位（em）
フォントサイズ設定にem単位を使うと、ユーザー設定のオーバーライドに関する問題を回避しやすくなります。1emの大きさはブラウザーのfont-sizeのデフォルト値で決まります。開発者やユーザーが変更しなければ、1emは16pxです。
要素に対するem単位の値は、その要素から継承したfont-sizeの計算値で決まります。つまり要素が継承するfont-sizeが25pxの場合、2emは50pxと算出されます。
上の要素のfont-sizeをすべてem単位で設定しました。
div {
font-size: 1.2em;
}
code {
font-size: 0.9em;
}
p, a {
font-size: 1em;
}2つ目のdivは別のdivにネストされています。さらにdivのfont-sizeは1.2emに設定されています。これは、2つ目のdivでのすべての要素のfont sizeが最初のdivの対応する要素の1.2倍のになるという意味です。たとえば1つ目のdivのリンク「WikiPedia」のfont-sizeは19.2pxですが、2つ目のdivでは23.04pxです。ちょうど1.2倍です。
レスポンシブWebサイトで、さまざまな要素のfont-sizeを所定のブレークポイントで拡大縮小するなら、 htmlのbody要素でブレークポイントのfont-sizeを指定するだけでOKです。ほかの要素のフォントサイズも対応して拡大・縮小されます。
em単位の値は要素が継承したfont-sizeで決まります。したがってem単位は、独立したモジュール内での要素をはじめ、Webサイトでの独立したセクション内で関連要素のフォントサイズを指定する場合に便利です。
Rem単位（rem）
em単位の問題は、親要素のfont-sizeに従って子要素のfont-sizeが拡大縮小するのが望ましいとは限らないことです。font-sizeの継承が、em単位の値を計算するプロセスを複雑にする場合があります。
この問題はrem単位で解決します。1remの値はルート要素のfont-size値と同じです。
divコンテナのfont-sizeをrem単位で設定しています。それ以外の要素のfont-sizeはem単位のままです。
div {
font-size: 1.2rem;
}
code {
font-size: 0.9em;
}
p, a {
font-size: 1em;
}divコンテナのfont-sizeをrem単位で設定すれば、font-size継承による問題を避けられます。
独立した別モジュールの親コンテナのfont-sizeでrem単位を設定すれば、モジュール内の全要素のfont-sizeを親要素に従って設定できると同時に、ほかのモジュールからは切り離して設定できます。
パーセント（%）
パーセントはem単位と同様です。ルート要素におけるブレークポイントでfont-sizeを設定し、レスポンシブWebデザインでの計算が容易になります。以下に例を示します。
html {
font-size: 62.5%;
}
div {
font-size: 2rem;
}
code {
font-size: 0.9em;
}
p, a {
font-size: 1em;
}ブラウザーのデフォルトのfont-sizeは16pxなので、html要素のfont-sizeを62.5%にすると、10pxになります。これでほかの要素でのフォントサイズ計算が簡単になります。たとえばある要素のfont-sizeを30pxにするには「3rem」、42pxにするには「4.2rem」に設定すればよいのです。
Viewport単位（vw、vh、vmin、vmax）
viewport単位はかなり興味深い単位です。さまざまな要素のfont-sizeをビューポートのサイズを基準にして設定できるのです。ビューポートの幅と高さに従って変化するため、viewport単位を適切に使えば、複数のブレークポイントで別個のfont-sizeを設定する必要がなくなります。たとえば、ビューポート幅が400pxのときの1vmは4px、ビューポート幅が1000pxのときは10pxになります。詳しくは知らないと損！CSSのvh/vwの使いこなしでレスポンシブなサイト制作が捗るを参考にしてください。
viewport単位の唯一の問題点は、ビューポートサイズが小さすぎたり大きすぎたりすると、算出されたfont-sizeではテキストが読みにくくなってしまうことがある点です。viewport単位をほかの単位と組み合わせて使う解決策があります。このテクニックはviewport単位ベースのタイポグラフィに詳しく説明されています。
上記以外の絶対単位
CSSでは絶対単位もたくさん定義されています。絶対単位は、通常の画面ではあまり使われませんが、印刷用の画面で重要な役割を果たします。印刷用CSSでのfont-size設定にはポイント（pt）やパイカ（pc）が使えます。1ptは0.0138インチ、1pcは0.1666インチです。同様にインチ（in）、センチメートル（cm）、ミリメートル（mm）でページ余白を設定できます。
キーワードをでフォントサイズを設定
キーワードを使ったfont-size設定も可能です。絶対的なキーワード、相対的なキーワードの2種類があります。font-sizeの指定に使われる絶対的なキーワードは、ユーザーエージェントで算出したフォントサイズ表を参照します。絶対的なキーワードにはxx-small、x-small、small、medium、large、x-large、xx-largeがあります。
相対的なキーワードでは、フォントサイズ表の値と親要素のfont-sizeの計算値に基づいてfont-sizeが算出されます。相対的なキーワードにはlargerとsmallerがあります。親要素のfont-sizeがx-small付近である場合、font-sizeをlargerに設定するとその要素のfont-sizeはsmallになります。以下に例を示します。
div {
font-size: larger;
}
code {
font-size: smaller;
}
p, a {
font-size: small;
}2つ目のdivコンテナは別のdiv内にネストされています。2つ目のdivのfont-sizeはlargerに設定されているため、ネストによってフォントサイズが拡大されています。ちなみに絶対的なキーワードで設定しているので、ネストは段落（paragraph）内のテキストには影響していません。
ブラウザー対応状況
紹介した単位をプロダクトで使う前に、ターゲットブラウザーでの対応状況を確認してください。
px、pt、pc、in、cm、mmといった絶対単位はすべてのブラウザーでサポートされています。同様にem単位も、旧バージョンのIEを含め主要なブラウザーでサポートされています。
rem単位はIE8とそれ以前のブラウザーでサポートされていません。IE9とIE10でさえ、fontのショートハンドプロパティでrem単位を使うと、無効になります。これら2つのブラウザーは疑似要素ではrem単位をサポートしていません。
紹介したすべての単位の中でブラウザーの対応がもっとも良くないのはvewport単位です。さらにIE11とEdgeはvmax単位をサポートしていません。
最後に
CSSでさまざまな「長さの単位」と要素のfont-sizeに与える影響を説明しました。
一般に絶対単位の使用はできるだけ避け、相対単位を使うほうが良いでしょう。相対単位の中でも、モジュール内の子要素のフォントサイズ設定にはemを使い、モジュールのルート親要素など独立した要素ではrem単位がおすすめです。
さらにviewport単位をほかの単位と組み合わせて使えば、ビューポートの幅や高さが変わっても、タイポグラフィーのサイズを調整できます。
本記事はTom Hodginsが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。
（原文：A Walkthrough of CSS Length Units You Can Use for Font Size）
［翻訳：新岡祐佳子／編集：Livit］
