終了

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

Community Beginner ,
Feb 01, 2022 Feb 01, 2022

リンクをクリップボードにコピー

コピー完了

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

 

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

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

 

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

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

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

キーワード
macOS , Windows

表示

7.7K

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines

correct answers 1 件の正解

Community Expert , Feb 02, 2022 Feb 02, 2022

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

...

投票

翻訳

翻訳
Community Expert ,
Feb 02, 2022 Feb 02, 2022

リンクをクリップボードにコピー

コピー完了

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にしておけば、後々の問題は出ないと思います。

 

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

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

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines
Community Beginner ,
Feb 02, 2022 Feb 02, 2022

リンクをクリップボードにコピー

コピー完了

最新

r360studio Kazue Moriさん

 

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

大変勉強になりました。

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

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

投票

翻訳

翻訳

レポート

レポート
コミュニティガイドライン
他のユーザーへの思いやりを持ち、敬意を払いましょう。コンテンツの出典を明記し、投稿する前に内容が重複していないか検索してください。 さらに詳しく
community guidelines