【CSS】WEBにおける文字サイズのポイント指定とピクセル指定の違い
cssで出文字サイズを指定する時、単位にpxとptが使えます。
どちらを使った方が良いのでしょう。
そもそもpxとptの違いってなんでしょう。
ピクセル(px)とは?
パソコンの画面は小さな点の集まりで表示されています。
1ピクセルとはその小さな点一個のことです。
パソコンの画面に表示される情報の最小単位です。
100pxの画像と100px指定の文字は同じ大きさになります。
WEBサイトを構築する時、レイアウトや画像のサイズはピクセルで指定するので、レイアウトに対して思った通りの文字の大きさにしたいなら、文字サイズ指定は迷わずpxです。
ポイント(pt)とは?
1ポイントとは1/72インチという現実世界の絶対的な長さの単位です。
font-sizeを72ptと指定された文字は、閲覧するモニタの解像度に関わらず、画面に定規をあててサイズ測ると1インチです。
制作物を最終的に紙に出力するDTPの世界では、文字サイズ指定は迷わずptです。
ptをWEBで使うと少し困った事が起きてしまいます。
モニタの画面解像度(dpi)の問題です。
Windowsは96dpi、Macは72dpiという出力解像度です。OSの基本設定はそようになっていますが、現在は使用するモニタの解像度によって実際のdpiが左右されるので、dpiはパソコンによってバラバラです。
dpiというのは1インチ内にドットがいくつ並ぶかという数値です。
dpiがPCによってバラバラという事は、font-sizeを72ptと指定された文字が何ピクセルになるかはPCによってバラバラという事です。
これでは、文字も含めて狙ったレイアウトに収めるのは至難の業です。
結論!
WEBでポイント(pt)指定を使うことはまず無い!
ポイント(pt)指定は印刷の為にある!
補足!
上の文章は、かなりざっくりした部分が、かなりあります。
ドットとピクセルの違いや、ブラウザごとの出力解像度の違い等、細かい部分を考え始めると脳が溶けそうになるので、また別の機会に・・・
コメントを残す