【CSS】WEBにおける文字サイズのポイント指定とピクセル指定の違い

cssで出文字サイズを指定する時、単位にpxとptが使えます。
どちらを使った方が良いのでしょう。
そもそもpxとptの違いってなんでしょう。

パソコンの画面は小さな点の集まりで表示されています。
1ピクセルとはその小さな点一個のことです。
パソコンの画面に表示される情報の最小単位です。
100pxの画像と100px指定の文字は同じ大きさになります。

WEBサイトを構築する時、レイアウトや画像のサイズはピクセルで指定するので、レイアウトに対して思った通りの文字の大きさにしたいなら、文字サイズ指定は迷わずpxです。

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)指定は印刷の為にある！

上の文章は、かなりざっくりした部分が、かなりあります。
ドットとピクセルの違いや、ブラウザごとの出力解像度の違い等、細かい部分を考え始めると脳が溶けそうになるので、また別の機会に･･･