CSSでフォントサイズ（font size）を指定するには？適切な単位の選び方

更新日: 2020年08月24日

フォントサイズを*「14px」*のようにピクセル指定するのは、ホームページの文化が広まっていった1997年頃からずっと続いてきた伝統のようなものです。しかし、20年前とは違って、Webデザインを行う環境も変わってきたので、HTMLやCSSの中でやみくもに「px」を指定するのは考え直したほうがいいのかもしれません。

実際のところ、フォントサイズやボックスサイズを指定するときに、ピクセル以外の単位で指定することのほうが多くなってきました。それではなぜ、「px」でフォントサイズを指定するのに問題が発生してしまうのでしょうか。

今回は、CSSで知っておきたいフォントサイズ指定の単位について、「px」を使うことで生じる問題についても触れながら解説します。20年前のWebスタンダードを脱し、今日のWebの基準に合わせていくために、正しい知識を確認していきましょう。

CSSでフォントサイズ（font-size）を指定する方法

フォントサイズを指定する方法はいくつかありますが、CSSで以下の記載する方法が一般的です。

font-size:数値＋単位;

同じ数値で指定しても、使われている単位が違えば文字の大きさは変わります。よく使われる代表的な単位としては以下が挙げられます。

フォントサイズ（font-size）の単位はどれにすべきか

上記で紹介した通り、指定できるフォントの単位はたくさんあります。それでは、どの単位で指定するのがベストなのでしょうか？

20年前のフォントサイズの指定方法

HTMLが登場した当初のフォントサイズ指定を思い出して見ましょう。
CSSが登場する前、まだHTMLタグを大文字で書くのが一般的だったころには、フォントサイズの大きさや色は*>FONT<タグ*で指定するのが一般的でした。

<FONT SIZE=“3”>フォントサイズ3がデフォルトサイズ</FONT>

このSIZEというプロパティは、1〜7までの整数、または現在のフォントサイズに対して「+」「-」で指定しました。しかし、1996年以降のCSSの登場によって、*>FONT<タグは「非推奨要素」*となってしまいました。

実際、>FONT<タグによる指定と、スタイルシートによる指定を使い比べてみると、スタイルシートによる指定のほうがはるかに自由度が高く、変更も用意なので、スタイルシートは瞬く間に広がっていきました。

1996年といえばWindows95が発売されてまだそれほど月日が経っていない時代ですが、その頃からすでにHTMLではWebページの構造を、CSSではページレイアウトを記述するというHTMLから見た目の要素を分離した方法が定義されていたのです。

1996年に初めに登場した「CSS1」では、フォントサイズについて次のように言及されています。

ディスプレイはほとんど同じサイズなのでフォントは特定のものを使いましょう
(Displays are roughly all the same size so use static fonts.)

しかし、「12:8」の比率のスクリーンばかりでインターネットを閲覧していた20年前とは異なり、現在ではさまざまな大きさのデバイスで、解像度もディスプレイの縦横比も違うために、単純にフォントサイズを1つだけに指定するのには限界があります。

もちろん、CSSは上位互換性(Backwards Compatibility)を備えているので、新しい機能が追加されても、従来のものはこれまで通り使うことができます。しかしながら、デバイスのサイズや解像度にも考慮してホームページをデザインしていくのが、これからのWebデザインのあるべき姿です。

とりあえず「px」は間違い。フォントサイズに関する誤った認識

もしかしたら、Webデザインを学んでいる人々のなかには、フォントサイズに関して誤った認識をしている方がいるかもしれません。というのも、ひとまず「px」という単位で指定しておけば、数値の大小によって見たい大きさのフォントサイズがなんとなく表現できてしまうからです。

しかし、フォントサイズは必ずしもスクリーンのピクセル数と一致しているとは限りません。

例えば、16pxでフォントサイズを指定したときに、あるフォントファミリーでは「A」の文字が24pxの高さである一方で、別のフォントファミリーでは「A」の文字が26pxの高さになることが起こります。また、カーニングやアンチエイリアスの処理はブラウザやOSごとに異なり、さらにはデバイスごとにピクセル比は異なるので、同じフォントサイズを指定しても異なって見えてしまいます。

これをカバーするためにUser Agentを指定しようとしても、結局はデバイスごとに見え方が変わってきてしまうのです。

CSSでのフォント指定でpxを指定するときに発生するさまざまな問題点

CSSで「px」を指定することで発生する問題点には、どんなことがあるのでしょうか。

1. 小数点の問題

「px」も含めて、フォントサイズを指定する時に利用するすべての単位は、モダンブラウザでは小数点を使うことができるようになっています。
(実際には違うのですが)一般的には「1px」はスクリーン上の小さな点であるピクセルと同じ大きさだと想定されているので、ピクセル比が1の場合に小数点を使うのは意味をなしません。
小数点を使う場合、「em」や「rem」といった単位で使って初めて意味をなすと言えます。

2. 1ピクセルの実際の大きさ

CSSにおけるピクセルは、スクリーンサイズのピクセルとは実際には異なっています。
W3Cによるドキュメントによれば、「px」に関して次のような定義がなされています。

px：ピクセルユニット ── 1pxは0.75ptと同値

これによれば*「1px＝0.75pt」*となっており、「px」はピクセルの大きさからくる絶対値ではなく、「pt」の大きさを元に測った相対指定の値であることがわかります。

デバイスのピクセル比もデバイスによって変わるので、iPadで見る時とKindleで見る時とGalaxy Tabで見る時で、文字の大きさも違って見えるのです。

単位はemやremがおすすめ

何かwidthやheightを指定して見せ方を統一したい場合は、*「em」や「rem」*を使うようにしましょう。

「em」という単位を使うと、コンテナは常にフォントサイズに応じて可変になります。
もしテキストコンテナ内のフォントサイズを「em」の単位を使って更新をした場合には、「em」で指定したwidthやheightも同様の比率で変化するので、「px」指定したときに3つの値を修正していたのが、1回の修正で事足りることになります。

「rem」を使う場合は、root要素(html)のフォントサイズを変化すればいいだけのことです。