フォントサイズの単位はpx(ピクセル)か?pt(ポイント)か?
下記情報が参考になると幸いです。
✅ フォントサイズに使われる主な単位
| 単位 | 読み方 | 主な使用場面 | 特徴 |
|---|---|---|---|
| pt | ポイント | DTP、印刷、Word、Illustrator など | 1pt = 約0.3528mm(印刷基準) |
| px | ピクセル | Web、画面デザイン(Figma・Photoshop・CSS) | 画面上の1ピクセル単位。解像度依存 |
| em / rem | エム / ルートエム | WebのCSS(レスポンシブ対応向け) | 基準フォントサイズに対する相対値 |
| % | パーセント | CSSで相対的に指定 | 親要素のサイズに依存 |
🔍 単位の違いと使い分けの目安
| シーン | 一般的な単位 | 理由 |
|---|---|---|
| Webデザイン(HTML/CSS、Figmaなど) | px(ピクセル) | 画面の実表示サイズに対応しやすいため |
| 印刷物(チラシ、書籍、DTP全般) | pt(ポイント) | 印刷の世界で標準的なサイズ指定単位 |
| WordやPowerPoint | pt(内部的に) | 表示上はptで管理されている |
| CSSでレスポンシブ対応したい | em / rem | ブラウザや親要素に応じて柔軟に調整可能 |
✅ pt と px の目安換算(画面用)
- 通常のディスプレイ(96dpi)の場合:
1pt ≒ 1.33px
12pt ≒ 約16px
※ これは ディスプレイの解像度(DPI) によって変動します。印刷とWebで見た目がズレる原因にもなります。
✅ 結論まとめ
| 誤解 | 実際のところ |
|---|---|
| pt は印刷専用? | ✅ ほぼ印刷向けですがWordやOffice系にも使われます |
| px は画面用限定? | ✅ FigmaやPhotoshop、CSSなどで主に使用されます |