このPX・PT変換ツールは、画面用と印刷用の制作に向けて、ピクセルとポイントをすぐに相互変換できる軽量なブラウザツールです。
主な機能:
- 双方向変換 - いずれかのフィールドに入力すると、他のフィールドがリアルタイムで更新されます。
- DPI モード切り替え - コンテキストに合わせて画面 (96 dpi) と印刷 (72 dpi) を切り替えます。
- ライブ数式表示 - 使用された正確な乗算が表示されるため、結果だけでなく数学を理解できます。
- 一般的な値のリファレンス - 8px、16px、24px、64px などの頻繁に使用されるサイズに対応する 12 個のクリック可能なチップ
- コピー ボタン - ワンクリックでいずれかの値をクリップボードに取得します
- 入れ替え - 再入力せずに変換の方向を反転します。
Figma、CSS、印刷ドキュメントの間を移動するデザイナーに役立ちます。数式バーにより、単なる計算機ではなく学習ツールにもなります。
このPXからPTへのコンバーターの使用方法
上のコンバータの上部にある画面 (96 dpi) または印刷 (72 dpi) を選択し、いずれかのフィールドに値を入力します。入力すると他のフィールドが更新され、数式バーには結果の背後にある正確な乗算が表示されます。
フィールドの下にある 12 個のチップは、ワンクリックで一般的なサイズに入力されます。 [交換] ボタンを使用して方向を反転し、コピー ボタンを使用していずれかの値を取得します。
ピクセルとポイントは 72 dpi でしか整列しないため、DPI の切り替えは重要です。ほとんどの画面とすべてのブラウザが使用する 96 dpi 標準では、1px は 0.75pt に相当します。そのため、1px = 1pt と仮定すると本番環境で問題が発生します。
PX から PT への計算式
一般的な式は、出力環境のピクセル密度によって異なります。
pt = px × 72 ÷ PPI
PPI はほとんどの人が忘れている変数です。 96 PPI ウェブ標準では、72 ÷ 96 は 0.75 となり、すべてのコンバーターとすべての CSS 印刷スタイルシートが依存するショートカットが得られます。
pt = px × 0.75
- 16px → 12pt
- 24px → 18pt
- 32px → 24pt
- 10px → 7.5pt
W3C の CSS Values and Units Module (EN) は、この比率を直接修正します。つまり、1 CSS ピクセルは 1/96 インチに相当し、1 ポイントは 1/72 インチに相当します。この 1/96 という数値は、標準ディスプレイの1 インチに収まるピクセル数 (EN)を計算するために使用される数値と同じです。
72 PPI では、ピクセルとポイントは等しくなります: 1px = 1pt。 「それらは同じである」という神話はここから来ています。 72 PPI しか維持できませんが、これは現代のスクリーンではまれです。
ここで丸めが重要になります。均等に割り切れない値は長い小数点を生成し、ほとんどの設計ツールは完全な数値を表示するのではなく、小数点以下 1 桁または 2 桁に四捨五入します。デザイナー設定 10px はちょうど 7.5pt になりますが、15px は 11.25pt になります。
PT から PX: 逆の公式
ポイントから 96 PPI のピクセルに戻り、0.75 で割るか、1.333 を掛けます。
px = pt ÷ 0.75
- 12pt → 16px
- 9pt → 12px
- 18pt → 24px
- 11pt (Wordのデフォルト) → 14.67px
両方の単位が同じインチに遡るため、関係は固定され、対称的です。上記のコンバーターの [ポイント] フィールドに値を入力して、コンバーターを実行します。
PXからPTへの変換チャート
96 PPI での参考値:
| PX | PT |
|---|---|
| 8px | 6pt |
| 10px | 7.5pt |
| 12px | 9pt |
| 14px | 10.5pt |
| 16px | 12pt |
| 18px | 13.5pt |
| 24px | 18pt |
| 32px | 24pt |
| 48px | 36pt |
| 64px | 48pt |
| 72px | 54pt |
| 96px | 72pt |
標準の本文テキストは 16px / 12pt です。 16 ピクセルはすべての主要ブラウザが CSS ミディアム キーワードでレンダリングするデフォルトのフォント サイズであるため、この組み合わせは重要です。そこから、見出しと表示サイズが予想どおりに拡大します。
代わりに、別の物理単位のピクセル値が必要ですか?専用のピクセルからインチへの変換ツールが独自に処理し、同様のピクセルからセンチメートルへの変換ツールがメートル法側をカバーします。
PX から PT へのコンバーターとは何ですか?
PX から PT へのコンバーターは、ピクセル値をタイポグラフィー、印刷レイアウト、デザイン ソフトウェア用のポイント値に変換する計算機です。
これは、CSS (EN) が画面上のテキストをピクセル単位でレンダリングするのに対し、印刷ツールやページ レイアウト ツールはテキストと間隔をポイント単位で測定するために存在します。固定変換を行わないと、画面上では正しく表示されるフォントが、完全に間違ったサイズで印刷される可能性があります。
設計者は、いくつかの繰り返し発生する状況でPX から PT へのコンバータを求めます。
- Web モックアップを印刷可能な PDF にエクスポートする
- 画面上で表示するのではなく、印刷することを目的としたドキュメントのフォント サイズを設定する
- Web チームと印刷チームの間でタイポグラフィの仕様を一致させる
- CSS フォント サイズをスタイル ガイドのポイント値に変換する
このツールは、単純な物理測定のコンテキストではなく、タイポグラフィのコンテキストを想定しているため、一般的な単位コンバータとは異なります。インチまたはセンチメートルを意味するピクセル値を入力すると、技術的には正しいですが、実際には役に立たない答えが得られます。これらの単位には、ポイントのような印刷遺産が受け継がれていないからです。
Adobe の PostScript 言語リファレンス マニュアルは、1985 年にポイントをちょうど 1/72 インチに修正し、1886 年以来活字を管理してきたわずかに小さな 1/72.27 インチのプリンターのポイントを置き換えました。この 1 つの決定が、現代の px から pt への変換が、古い印刷所が対処しなければならなかった端数のポイント サイズではなく、1 つの一貫した予測可能な数値を生成する理由です。
PX と PT: これらのユニットの違い
ピクセルとポイントは 2 つの異なる測定方法に由来しており、それがコンバーターが必要な理由です。
ピクセルは画面に関連付けられ、ポイントは印刷ページに関連付けられ、どちらも自動的に他方と一致するように調整されることはありません。
ピクセル（PX）とは何ですか?
ピクセル は、画面がレンダリングできる最小単位である Picture element の略です。ピクセルは画面に依存します。96 PPI モニター上の 16 ピクセルのフォントは、72 PPI ディスプレイ上の 16 ピクセルとは異なって見えます。
- CSS ピクセルは固定参照単位であり、モニター上の物理的なドットとは異なります。
- 表示される画面に応じてレンダリングされるサイズが変化します
- 高密度ディスプレイでは、1 CSS ピクセルのスペースにより多くの物理ドットが詰め込まれます。
Apple の Retina ディスプレイは、このピクセル密度 (EN)効果の最も明確な例であり、物理的なドット数が 2 倍になるため、1 つの CSS ピクセルが各方向に 2 つのデバイス ピクセルにまたがります。
ポイント（PT）とは何ですか?
ポイントは、コンピュータ画面が登場する何世紀も前から存在する印刷単位であり、印刷や植字に使用されていました。
1 ポイントは 1/72 インチに相当し、デバイスやディスプレイに基づいて変化しない固定の物理的測定値です。
12 個のポイントで 1 pica が作成されます。これは、Web 上で使用されるものよりもページ レイアウト ソフトウェアで使用されるもう 1 つのタイポグラフィ単位です。
ポイントは物理的なインチに固定されているため、ファイルを作成したプリンタやソフトウェアに関係なく、同じポイント値が同じサイズで印刷されます。
DPI によって PX から PT への変換が変更される理由
DPI は 1 インチを表す物理ドットの数を決定します。0.75 という比率は、CSS に組み込まれている 96 DPI 標準でのみ適用されます。
DPI (EN) を変更すると、同じピクセル数は同じ物理サイズと等しくなくなります。
商業プリンタでは通常、鮮明な出力を得るために 300 DPI (EN) が必要ですが、ほとんどの画面のレンダリングでは 72 ～ 96 DPI が必要です。たとえば、Vistaprint のアップロード ガイドライン (EN)では、最終的な印刷サイズで 300 DPI を最小値として設定します。
| DPI標準 | 一般的な使用方法 | PXからPTへの影響 |
|---|---|---|
| 72 DPI | レガシー画面と初期の Mac ディスプレイ | 1px = 1pt |
| 96 DPI | 最新の Web ブラウザ、CSS のデフォルト | 1px = 0.75pt、標準比率 |
| 300 DPI | プロの印刷物制作 | 1px = 0.24pt;比率を再計算する必要があります |
画面で使用するために構築されたピクセルからポイントへの変換は、ブラウザーでは正しく表示されますが、300 DPI の印刷実行に達すると、サイズが小さくなります。
設計作業で PX と PT を使用する場合
スクリーン作業には px が必要で、印刷作業には pt が必要であり、1 つのワークフロー内で 2 つを混在させると、サイジングの問題が発生します。
ピクセル (px):
- デバイスの画面とビューポートを正確に一致させます
- 物理的なサイズを無視するため、画面上では正しく見えるレイアウトでも、予想よりもはるかに小さく印刷されたり、大きく印刷されたりする可能性があります。
ポイント (pt):
- どのデバイスでファイルを開いたとしても、紙上の固定の物理サイズを保持します。
- ピクセルベースの画面グリッドにきれいにマッピングされないため、画面上のプレビューがわずかにずれて見える場合があります
多くのデザイン チームは、8 ポイント グリッド システム (EN) を使用して間隔を標準化しています。これにより、すべての測定値がピクセル単位で維持され、印刷用に変換された後もきれいに拡大縮小されます。
これは、8px の倍数が小数点を残さずに丸められたポイント値に変換されるため機能します。
複数のデバイス向けに構築する画面優先のチームは、レスポンシブ デザイン (EN)の実践に頼る傾向があり、レイアウトがさまざまな画面に適応しても、ピクセルは依然としてほとんどの測定値を固定します。
PX、PT、EM、REM: 適切な CSS ユニットの選択
ブラウザでは画面上のサイズ設定にデフォルトで px、em、rem が使用されるため、Pt が日常の CSS に現れることはほとんどありません。
CSS における主な役割は印刷スタイルシートであり、スケーラブルな物理単位よりも固定の物理単位の方が重要です。
W3C の WCAG 1.4.4 ガイドライン (EN)では、コンテンツや機能を失わずにテキストのサイズを200%まで変更できることが求められています。これは、px や pt のようなバー固定ユニットが自力でクリアするのに苦労することです。
| 単位 | 種類 | 基準となる値 | 一般的な使用方法 |
|---|---|---|---|
| px | 絶対単位 | 何もない、固定サイズ | 画面レイアウト、ボーダー |
| pt | 絶対単位 | 何もない、固定サイズ | 印刷スタイルシート、植字 |
| em | 相対単位 | 親要素のフォントサイズ | コンポーネントレベルのサイジング |
| rem | 相対単位 | ルート要素のフォントサイズ | グローバルフォントと間隔スケール |
em と rem (EN) の違いは、初心者の多くをつまずかせます。どちらもフォント サイズに応じて拡大縮小されますが、参照する要素が異なるためです。
ウェブ アクセシビリティ (EN)に関するガイドラインでは、相対単位はユーザーのブラウザ設定を考慮するため、一般にテキストの px や pt よりも rem と em が優先されます。
Pt は印刷固有のスタイルシートとしての地位を保っていますが、CSS の他の場所ではマイナーな役割を果たしています。
デフォルトで PT と PX を使用するソフトウェア
ブラウザおよび画面ベースのツールのデフォルトは px ですが、印刷およびワードプロセッサ ソフトウェアのデフォルトは pt です。
この分割は、各プログラムが出力するために構築されたものと一致しています。
| ソフトウェア | デフォルトの単位 | のために作られた |
|---|---|---|
| Webブラウザ・CSS | px | 画面レンダリング |
| Adobe InDesign | パイカとポイント | 印刷レイアウト |
| Microsoft Word | ポイント | 書類、印刷 |
| Figma | ピクセルのみ | 画面・UIデザイン |
InDesign には、新しい印刷ドキュメントのデフォルトの定規単位としてピカが同梱されていますが、Adobe の測定単位のドキュメント (EN)に記載されているように、文字サイズ自体は常にポイント単位で設定されます。
Word はこれをさらに直接的に処理します。Font.Size プロパティ (EN)はフォント サイズをポイント単位で返して設定し、空白の文書はデフォルトで 11 ポイントの Calibri に設定されます。
Figma は完全に反対側に座っています。 Figma 独自のドキュメント (EN)では、すべての寸法フィールドがピクセル単位で表示されており、インターフェイスにはポイント オプションがまったく組み込まれていません。
このギャップは、印刷用にポイントで書かれた型仕様がピクセルのみのツールで作業するチームに渡されるときに、実際の摩擦を引き起こします。誰かがそれを一方向に変換し、逆方向に変換する必要があります。
レンダリングの違いにより、プログラム間で問題がさらに複雑になります。これが、両方のユニット タイプが混在するレイアウトでブラウザ間の互換性 (EN)テストが重要である理由の 1 つです。
CSS で PX を PT に変換する方法
CSS 自体の内部での変換には 4 つの手順が必要です。
- 作業対象のピクセル値を特定する
- その値に 0.75 を掛けます
- 結果を必要なプロパティ (font-size など) に pt 値として書き込みます。
- ページをプレビューして、レンダリングされたサイズが期待したものと一致していることを確認します
20 ピクセルの見出しは、変換されると font-size: 15pt; になります。
通常の画面スタイルシート内の pt は px のように動作しないため、ほとんどのチームは専用の印刷スタイルシートを作成する場合にのみこれを行います。
pt ベースのルールを印刷固有のメディア クエリ (EN)内にラップすると、通常の画面でのページの表示に影響を与えなくなります。
そのステップをスキップすると、通常、閲覧している訪問者には、モニターではなく紙に合わせたサイズのフォントが表示される可能性があります。
デザインおよび印刷ソフトウェアで PX を PT に変換する方法
Adobe Illustrator および InDesign での変換
- 「環境設定」を開き、ルーラーまたはタイプ単位をポイントに設定します。
- ピクセルベースの測定値に 0.75 を掛けた値をサイズ フィールドに直接入力します。
- 「文字」パネルまたは「段落」パネルで値を確認します。どちらのパネルにも、デフォルトで文字サイズがポイント単位で表示されます。
ポイントは Adobe の印刷ツールのネイティブのタイポグラフィ単位であるため、どちらのアプリケーションもルーラーの単位の設定に関係なく、 タイプの測定値をポイントで維持します。
Microsoft Wordで変換する
- フォント サイズ フィールド: すでにポイント単位で測定されているため、変換された pt 値がサイズ ボックスに直接入力されます。
- 間隔と余白: Word のページ レイアウトはデフォルトでインチに設定されており、ピクセル値が関係する場合は別途変換が必要です。
Word のインターフェイスには直接ピクセル入力がないため、ピクセルベースの仕様はすべて、使用する前に変換する必要があります。
画面デザインファイルを印刷用に変換する
画面モックアップを印刷可能なものにエクスポートするということは、フォント サイズを変更するだけではありません。
通常、ピクセルベースの測定値が紙上で使用可能なものに変換される前に、ファイル全体をはるかに高い画面解像度 (EN)相当に移行する必要があります。
エクスポート中に、次の 3 つのことが同時に変更されます。
- フォント サイズは 0.75 の比率を使用して px から pt に変換されます
- 画像解像度は画面密度から300 DPI に向かって変化します。
- 間隔とマージンは、多くの場合、直接拡大縮小されるのではなく、インチまたはミリメートルで再構築されます。
これら 3 つの手順のいずれかをスキップすると、画面に完璧なデザインがプリンターから返されて間違ったものとして表示される最も一般的な理由になります。
PX から PT への変換が適用されない場合
0.75 比率はちょうど 96 DPI でのみ保持されます。
その特定の条件の外に移動すると、標準の px から pt への計算式は物理的に正確な答えを与えなくなります。
標準的な公式が崩れる箇所:
- 比率が 1 つのベースラインに固定されているため、96 以外の DPI に設定された画面またはドキュメント
- 高密度 Retina およびモバイル ディスプレイ。1 つの CSS ピクセルが 2、3、またはそれ以上の物理デバイス ピクセルにマッピングされます。
- 解像度の比率を再計算せずに 300 DPI 印刷出力用にファイルを変換
- 2 つのポイント システムは物理的なサイズが同じではないため、標準ポイントの代わりに Didot ポイントを使用してドキュメントを作成します。
W3C 独自の参照ピクセル定義 (EN)では、このギャップを直接認めています。CSS ピクセルは、通常の読み取り距離で約 0.26 mm です。この数値は、実際に測定されたスクリーン ドットではなく、特定の表示設定を想定しています。
これは物理的な保証ではなく、意図的に近似したものであり、同じピクセル数でも異なる画面では異なる物理サイズに見えるのはまさにこのためです。
このため、いくつかの間違いが常に発生します。
- 実際に 300 DPI に設定されている印刷ファイルに 0.75 の比率を適用すると、意図したよりもはるかに小さいテキストが生成されます。
- パイカが実際には 12 ポイントである場合に、パイカとポイントを交換可能なものとして扱う
- 変換された pt 値がすべてのブラウザまたはすべてのオペレーティング システムのレンダリング エンジンで同一に見えると仮定します。
これらの条件のいずれかが当てはまる場合、修正方法は別のものではありません。 DPI 対応の印刷設定であっても、ソフトウェア ネイティブのポイント フィールドであっても、宛先ソフトウェアが実際に測定する単位に切り替わります。
px や pt などの静的な単位も、ブラウザでテキストのサイズを変更する読者にとって作業を複雑にします。これが、アクセシブルなタイポグラフィ (EN)に関するガイダンスが、画面上の本文テキストの固定単位を完全に遠ざけるもう 1 つの理由です。
よくある質問：pxからptへ変換
パイカとは何ですか?ポイントとどのように関係しますか?
パイカは12 ポイントに相当する印刷単位で、主に印刷レイアウトの列幅と行の長さを測定するために使用されます。
ポイントはタイプのサイズを測定し、パイカはスペースのより大きなブロックを測定します。 Adobe InDesign のルーラーは、p 表記と pt 表記の両方で表示されます。
ブラウザのズームや画面密度は変換に影響しますか?
ブラウザのズームでは、ピクセルも含めてページ全体が拡大縮小されるため、どのズーム レベルでも 0.75 の比率が維持されます。
画面密度の動作は異なります。高密度ディスプレイでは、各 CSS ピクセルにより多くの物理ドットが詰め込まれ、計算を変更せずに変換されたポイント サイズの見た目が歪みます。
同じ式を逆に使用して PT を PX に戻すことはできますか?
はい。ピクセルを戻すには、ポイント値を 0.75 で割るか、1.333 を掛けます。 12ptは16px、18ptは24pxになります。実際の例は、上記の PT から PX へのセクションにあります。
標準ポイントとディドットポイントの違いは何ですか?
CSS およびほとんどのソフトウェアで使用される標準ポイントは、1/72 インチ、つまり約 0.353 mm に相当します。
ヨーロッパ大陸の植字で一般的なディドット ポイントは、現代のインチではなく古いフランスのロイヤル インチに基づいて、 およそ0.376 mmの大きさです。
REM や EM などの相対単位は PT に変換する必要がありますか?
いいえ。Rem (EN) と em はフォント サイズを基準にしてスケールされますが、pt は親要素やルート要素との関係のない固定の物理単位です。
それらの間で変換すると、そもそも相対単位を使用する目的が無効になります。
PX から PT へのコンバーターを使用する前に結果を確認するにはどうすればよいですか?
PX から PT へのコンバーターの結果は、数値の背後にあるDPI の仮定、変換先のソフトウェアが期待する単位、および値が配置された後に実際にどのようにレンダリングされるかという 3 つのことを順番にチェックすることで確認されます。
順序をスキップすると、従うよりも時間がかかります。間違った DPI 仮定は、最初の 2 つのチェックで既に労力が費やされた後、3 番目のチェックでのみ表面化します。
- ファイルが構築された DPI を確認する
- 本体と接続先のソフトウェアを一致させる
- 完成する前にテストサンプルをレンダリングまたは印刷します。
このシーケンスに従うと、スクリーン チームと印刷チーム間のすべての引き継ぎに手動のステップが 1 つ追加されます。その代わり、 ドキュメントは納品後にサイズ変更する必要がありません。
フォント サイズを確認したら、次に不一致が隠れるのは間隔とレイアウトの幅です。そこで、px と rem (EN) を比較することが、より有用な変換の質問になります。