【HTML】フォント(FONT/文字)サイズの単位

多くの方がHTML作成時に使用しているフォントサイズの単位は、pxかemではないかと思います。

どれがいいのかは、それぞれ長所と短所があるのでなんともいえませんが、サイズ表記に使われる各単位を比べてみました。

相対単位

ユーザ側の画面サイズなどに合わせて変わる単位で、あるものを基準としてサイズを指定します。

単位	読み方	説明
em	エム	文字の高さを基準とする。要素内の大文字フォントMの高さを１とし、そのフォントサイズに対する相対的なサイズ値。1emは12ptに等しい。
px	ピクセル	ディスプレイの画素数。1pxはパソコン画面上の1ドット（画面の解像度の最小区分）に等しい。
ex	エックスハイト	小文字「x」の文字の高さに対する相対的なサイズ値

環境などに左右されない絶対値による指定となります。

単位	読み方	説明
mm	ミリメートル	10mm = 1cm
cm	センチメートル	1cm = 10mm
in	インチ	1in = 2.54cm
pt	ポイント	72pt = 1in MS-Wordのフォントサイズ単位。伝統的に印刷関連媒体に使用されている。
pc	パイカ	1pc = 12pt

基準となる長さは、その要素によって異なります。親要素で文字サイズを指定していない場合、基準となる長さはWEBブラウザに依存されます。

一般的にHTML作成時は、bodyにfont-sizeを指定します（下記は12pxの場合）。一般的にfont-sizeを指定しない時は、主要ブラウザでデフォルトサイズは「16px」です。下記の表にて各サイズ単位を比較して見ました。

サイズ比較

フォントサイズ指定は「px」や「em」を使うのが一般的でしたが、「rem」という単位が新たにCSS3で追加されました。

「em」は親要素の影響を受けて相対的で、複利計算されてますが、「rem」では常にルート（またはhtml要素）に相対的となります。フォントサイズや他のプロパティはルート要素だけではなく、親に対して指定することができます。