pt・px・mm・em/remの違い:フォントサイズ単位の基本

フォントサイズの単位は印刷の世界と画面の世界、二つの由来を持っています。

ポイント(pt):印刷由来の単位

1インチの1/72を1ポイントとする印刷由来の単位で、数十年前にDTPソフトが標準化しました。今もワープロソフトや印刷デザインでは基本の単位として使われています。

ピクセル(px):画面の単位

画面上の単位ですが、実は固定された物理サイズではなく端末の解像度によって変わります。ウェブでは表示のばらつきを防ぐため、実際の画素密度ではなく96dpiを基準にした「CSSピクセル」という考え方が使われています。

96dpiという橋渡し

ウェブは1インチを96CSSピクセルとし、1ポイントは1インチの1/72なので、1pt=96/72=約1.333pxという関係になります。「12pt≒16px」という本文サイズの目安はここから来ています。

ミリメートル:実寸を表す単位

名刺やパッケージなど、出力サイズがあらかじめ決まっている印刷物では、実際の物理サイズを表すミリメートルが重要になります。同じピクセルサイズでも画面によって物理的な大きさが変わるのとは対照的です。

emとremの違い

emは親要素のフォントサイズを基準にするため、要素が入れ子になると意図せず大きさが積み重なってしまうことがあります。remは常にルート要素(通常html)のフォントサイズを基準にするため、ページ全体で予測しやすく、多くのデザイナーが標準として選んでいます。

アクセシビリティとの関係

pxのような固定値ではなくemやremのような相対単位を使うと、ユーザーがブラウザの標準フォントサイズを拡大した際に文字も一緒に拡大されます。固定ピクセル値ではこの拡大設定に反応しません。

ポイントが活版印刷に由来する理由

ポイントという単位はコンピューターより何世紀も前から活字の大きさを揃えるために活版印刷の世界で使われてきました。1980年代のDTPソフトが1インチの1/72という「PostScriptポイント」に簡略化したものが現在も使われており、72ptがちょうど1インチになるのはこのためです。

なぜウェブは96dpiを基準にしたのか

実際の画面は低解像度のモニターから高精細なスマートフォンまで画素密度が大きく異なるため、端末をまたいでフォントサイズの見た目を揃えるには固定の基準が必要でした。初期のWindowsが96dpiのディスプレイを標準としていたことから、その数値がCSSの事実上の基準として定着しました。

よくある質問

ワープロの12ptとウェブの12pxはなぜ見た目が違うのですか?

測っているものが異なるためです。12ptは印刷や画面の解像度に応じて描画される物理的な大きさを表し、12pxは96dpiを前提としたウェブ固有の画面単位です。両者はおよそ1pt≒1.33pxの関係にありますが、そのまま同じ大きさとして扱うことはできません。

ウェブサイトを作るときはpxとremのどちらを使うべきですか?

フォントサイズに関しては、ユーザーがブラウザのアクセシビリティ設定でフォントを拡大した際に追従するremを好むデザイナーが多いです。一方、枠線やアイコンのように拡大したくない固定サイズにはpxが今もよく使われています。