トップページへ

フォントサイズの単位について

気になるのが文字の大きさ(フォントサイズ)を指定する単位です。em、%、pt、px。各単位のそれぞれの特徴をまとめています。

変化するemと%指定

相対指定となります。IE6が圧倒的シェアを誇っていた頃、「必ずこれで指定」と言われていました。IE6は、px(ピクセル)で指定された文字サイズを簡単には変更できなかったからです。今のブラウザはpxだろうとサイズ変更できますから、普通に選択のひとつです。

【メモ:emや%の特徴】

その要素に何もフォントサイズを指定しなかった時の大きさを1や100%とします。例えば0.9emと指定すると何も指定しない時のサイズより少し小さくなります。(1.2emとすると逆に大きくなります)

【メモ:remの登場】

CSS3より新たにremが追加されました。remは、emや%のように親要素のスタイルを継承せず、一番最初(html要素)で指定したフォントサイズをずっと1とします。ただIE8以下が対応していないため、今、使うのならIE用に別にフォントサイズを指定して…というふうになると思います。

印刷するときに使う pt 指定

ポイント(pt)は、主に紙に印刷する時に使う単位です。
逆に言えばディスプレイに表示させる目的で使うには向いてはいません。ディスプレイの単位はピクセルやインチであってポイントではないからです。

フォントサイズをポイントで指定すると、OSとしては、ピクセル値に変換してからディスプレイに表示する必要が出てきます。Windows とMacでは、ポイントに対応しているピクセル値が違うため、画面に表示された時に文字の大きさが違ってしまいます。最初からピクセルで指定すればこんなこともないわけで、わざわざポイントを使って指定する必要はないです。

印刷する目的以外で使わないようにしたい単位です。

ディスプレイ表示に適した px 指定

ピクセル(px)は、ユーザー環境選ばずで、同じ大きさでディスプレイに表示される唯一の単位です。実際には解像度によって大きさが変わるのですが、ブラウザが調整するので、ほぼ同じような表示になります。
常に同じレイアウトで表示させたいということにこだわるのであれば、フォントサイズの単位として使うのにもっとも適しています。

【memo】

ブラウザの解釈が違えばpxといえども同じ表示にはなりません。今のブラウザ(モダンブラウザ)は16pxを「標準(中)」のサイズとして統一しています。

【Internet Explorer6】

IE6では、pt、pxをはじめ、[表示] - [文字サイズ] からでは変更できない単位があります。しかし、[ツール] - [プロパティ] - [ユーザー補助] にある [Webページで指定されたフォントサイズを使用しない] にチェックをすれば文字サイズの指定を無効にできます。

もっともこの機能は深い所にあるので、Webサイトごと、ページごとに変更してもよいと思えるレベルではないです。ただピクセル指定をしていて、どうしてもという場合、IE6のユーザーにはそうしてもらう方法もあるというこです。

【Internet Explorer7と8】

IE7は拡大表示はできますが、相変わらずpxやptで指定された文字サイズの変更はできません。IE8以降からは文字サイズの変更が出来るようになっています。

【Netscape4.xの問題点】

Netscape4.xは、pxを正確に表示できないというバグをもっています。文字の単位にピクセルを使うときはCSSで指定し、Netscape4には読み込ませないようにするほうがいいでしょう。Netscape4に、CSSを読み込ませない方法はNetscape4対策に記述してあります。

*現在はNetscape4に配慮して作成する必要はないです。(2012/03/25改訂にあたり削除)

CSSで指定する

CSSには、medium、small、x-smallなど、フォントサイズを指定するための値が7段階で用意されています。emや%と同じく昔からブラウザ側でで大きさを変更できたのですが、長らく奨励されてはきませんでした。
どうしてかというと、emや%の持つ欠点に加えて、ポイントと似たような欠点も持っており、「ブラウザがどう解釈するか」に左右されてしまうフォントサイズでもあったからです。
この問題はモダンブラウザでは解決されていますので、今では気にせず使えるレベルです。ただ、フォントの種類によってサイズは変わります。

【Internet Explorer5.5の問題】

IE6などのモダンブラウザの文字の大きさのデフォルト値はmediumとなっています。しかし、Internet Explorer4〜5.5ではデフォルト値はsmallになっています。

例えば、IE5.5とIE6のデフォルトの文字の大きさは、見た目はどちらも同じです。しかし、この状態をIE6はmediumと解釈しているのに対してIE5.5はsmallと解釈しています。従って

  • mediumを指定すると、IE6(他モダンブラウザ)では文字の大きさはデフォルトのままだが、IE5.5はデフォルト値よりひとまわり大きくなる。
  • smallを指定すると、IE5.5では、文字の大きさがデフォルトのままだが、IE6(他モダンブラウザ)ではひとまわり小さくなる。

のような問題が発生します。

デザインする側からすると「IE5.5でばっちり。でもIE6で見ると小さすぎる」「IE6で見るとばっちり。でもIE5.5で見ると大きすぎる」という、にっちもさっちもいかないような状態になってしまいます。(この回避方法についてはIE5.5対策を参照のこと)

*現在はIE5.5に配慮して作成する必要はないです。(1012/03/25改訂により削除)

【memo】

(IEを除く)今時のブラウザはユーザー側でフォントサイズを自由に設定できます。12pxと指定してもユーザー側が「これ以上小さな文字で表示しない」に14pxを指定していれば無効になります。
なので、フォントサイズを指定する目的は、見出しと本文、文書全体のバランスを整えるためという感じ、相対指定のemや%、remをよく使うことになるのではないかと思います。

トップページへ戻る


最終更新日:2013年4月3日
楠 尚巳