webデザインでは、フォントサイズの指定はpxとpt、どちらが正しいか

[dasuya]

Webサイトやランディングページなどのデザイン制作時に、フォントサイズをpixel、もしくはpointのどちらで統一すべきかについて、悩んでおります。

調べてみたところ、単位がpointの場合、ディスプレイの解像度で大きさが影響される。

ただし、解像度が72dpiだとptでもpxでも大きさに違いはないとありました。

つまりテキストを画像化する場合は、pixelでもpointでも差異はなく、表示に問題はなく、

デバイスフォントのサイズ指定ではデバイス環境により、表示のブレが出てしまうという認識であっておりますでしょうか。

ご教示いただけますと幸いです。

[r360studio Kazue Mori · Accepted solution]

dasuya さん、こんにちは。

Photoshopでウェブページを設計（デザイン）する場合は、単位をPixelsにして作業することが多いと思います。理由は、ディスプレイが「ピクセル」の単位で表示されているからです（Pointは、印刷された文字の単位です）。

※「Photoshopでウェブページを設計（デザイン）する場合」は、次のページで紹介されているような、“画像カンプ”をPhtoshopで作る場合を指しています。
https://webdesignerstart.com/production-practice/designcomp/ 

ですが、画像カンプをフロントエンドエンジニアの方が受け取り、HTMLやCSSを用いてウェブページへとコーディングする際に、フォントサイズの単位を「px（ピクセル）」にするかどうかは、ケースバイケースです。

次のページにCSSで用いられる単位について述べられていますが、よく用いられるのは「相対長の単位」です（Pixelsは絶対長の単位）。

https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units　

画像カンプを元にして、それに近い比率で表示できるように、デバイス毎に調整を行います（パソコン・タブレット・スマホなど、デバイスはいろいろあり、そのディスプレイ解像度はまちまちです）。

画像カンプで「Pixel」指定していたとしても、コーディングの際に調整するはずですので、画像カンプの段階では、単位をPixelにしておけば、後々の問題は出ないと思います。

ただし、第三者からの請負で、画像カンプ制作の仕事をされているのであれば、発注元に確認を取るのが確実です（現場毎にルールが決められている場合もあります）。

ご参考になれば幸いです。
.

[dasuya]

r360studio Kazue Moriさん

丁寧にご説明いただき助かります。

大変勉強になりました。

基本はpixel、請負の際は必ず確認をとるようにいたします。

お忙しい中 ご教示いただきありがとうございました。