【今さら聞けなそうなptとかpx、画面サイズと解像度の話】

「この図形の幅を20px、この見出しを20ptで出力・・・」
普段何気なく、そしてなんとなく使っているptやpx。
それはまるでイモリとヤモリのような・・・あらためまして、高橋倫佑です。
画像は某高級焼肉店の特選カルビ焼きです。う～ん。美味しかった・・・さて！

フォトショップやイラストレーター、ドリームウィーバーを使用していてもpxやptどちらか出てきたことはありませんか。
webにおけるフォントサイズのポイント指定とピクセル指定の違い、そして解像度とはなんなのでしょう。

1. px（ピクセル）ってなに？
2. pt（ポイント）ってなに？
3. 画像解像度と画像サイズの関係
4. さいごに

px（ピクセル）ってなに？

パソコンの画面ってどういう風な表示の形式をとっているかご存知ですか。
実は、あの鮮やかな液晶も、このどでかいディスプレイも、私たちのパソコンの画面は小さな点の集まりで出来ています。
1px（ピクセル）とはその小さな点のことです。
1px（ピクセル）はパソコンの画面に表示できる情報の最小単位です。その点が100個並べば100px。さらに500個並べれば500pxといった感じです。
同様に、100pxの幅の画像と100px指定の文字幅は同じ大きさになります。

繰り返しになりますが、私たちのパソコンの画面は1つ1つのピクセルで表示されています。
ですから、webサイトをコーディングする時にはピクセルを指定することで、余白や画像の幅、そしてフォントの大きさを思った通りの大きさに表現することが出来ます。

pt（ポイント）ってなに？

1pt（ポイント）は72分の1inch（インチ）という長さの単位です。
それは現実世界、画面上関係なく、例えばフォントの大きさを72ptと指定した文字は、パソコンの画面解像度に関わらず、画面にメジャーをあてて計測すると1inch（インチ）です。1インチといっても私たちにはなじみ深い数字じゃないかもしれません。
なじみ深い言葉だと1インチは2.54 センチメートルです。72ptを指定すると2.54センチメートルの幅になるということですね。

pt（ポイント）はどういった時に使うのか。
チラシやフライヤー、ジャケットや雑誌、パッケージなど、データを紙に出力するDTPの世界では、フォントサイズ指定はpt（ポイント）で作られます。

pt（ポイント）をWEBで使うとなにか不便なことがあるのでしょうか。
あります。それはモニタの画面解像度（dpi）の問題です。

Windowsは96dpi、Macは72dpiという出力解像度ですが、OSの基本設定はそうであっても、使用するモニタの解像度によって実際の画面解像度（dpi）が左右されるので、最終的なdpiはパソコンによってバラバラです。

dpiというのは1インチ内にドットがいくつ並ぶかという数値です。
dpiがPCによってバラバラという事は、フォントサイズを72ptと指定された文字が何ピクセルになるかはPCによってバラバラという事です。
これでは、文字も含めて狙ったレイアウトに収めるのは至難の業です。

画像解像度と画像サイズの関係

画像自体の「画像解像度（dpi）」、windowsの「出力解像度（dpi）」モニタの「画面解像度（dpi）」など、解像度(dpi)という言葉がたくさん出てきました。
どれも解像度(dpi)ではあるのですが、今一度、この解像度とは何を示しているのでしょうか。

画像解像度が72dpiの画像と144dpiの画像では数値の大きい144dpiの画像のほうが精度が高い画像となっています。
解像度の単位に使用されるdpiとは、先ほども書きましたが、1インチあたりのピクセル（ドット）数という意味があります。72dpiのピクセル画像というのは、画像を構成するピクセルひとつの大きさが1／72インチであり、144dpiの画像ではひとつのピクセルの大きさが1／144インチということです。そして288dpiならばひとつのピクセルの大きさが1／288。非常に細かく精度が高い画像となります。

簡単に言うと、「dpiが高い＝精度が高い＝1ピクセルの大きさが小さくなっている」と、印刷時に小さなツブツブで印刷できるので輪郭がギザギザになってしまったり、モザイクタイルのようにならないわけですね。反対に画像解像度が低いと大きなツブツブで印刷しなければならないので輪郭の処理が荒くなってしまうわけですね！

なるほど、webの画像を印刷すると、ボヤーッとしてしまうのは画像解像度が低いからですね！

以下をご覧ください。
同じ「あ」という文字でそれぞれ300px×300pxの中に300dpiと72dpiで表現されたものの比較です。

ツブツブが小さい、きめの細かい、300dpiの勝ちですね。