PTからPXへの変換器

PTからPXへの変換器は、画面と印刷の両方で、ポイントをピクセルに、そしてピクセルをポイントに変換します。多くの変換器は、固定されたCSS比率1pt = 1.3333pxに基づく1つの数値しか表示しません。その答えはブラウザーでは正しく、ほかのほとんどの場所では間違っています。ポイントは物理単位であり、その中に入るピクセル数は出力解像度によって変わるからです。このツールでは、ブラウザーが実際に表示するCSS値と、72、150、300、600、または任意のカスタムDPIでのデバイスピクセル値の両方に加え、実際の定規での正確な物理サイズをミリメートルとインチで表示します。

PTからPXへの変換式

1ポイントは正確に1インチの72分の1と定義されています。1インチに含まれるピクセル数は、出力解像度によって決まります。この2つを組み合わせると、変換式が導けます。

Webでは解像度は変数ではありません。CSS仕様では定義上1in = 96pxと定められているため、ブラウザーは常に96を使い、式は定数に置き換えられます。

そのため、1×のノートパソコン画面でも3×のスマートフォン画面でも、すべてのブラウザーで12ptは16pxになります。CSSピクセルはハードウェアピクセルではなく、基準単位です。

1インチ、3つの呼び方

単位を整理する最も簡単な方法は、どれも同じ物理的な距離を表していると覚えることです。下の各バーはちょうど1インチの幅です。

PTからPXへの変換表

CSSにはWebの列を使います。PDFをラスター画像に出力したり、印刷ファイルをレイアウトしたり、印刷するビットマップの文字サイズを決めたりするときは、300 DPIの列を使います。

同じポイントサイズなのにピクセル数が違う理由

ここが最も混乱しやすい点なので、はっきり説明しておきます。物理サイズは変わりません。12ptは常に1インチの6分の1です。変わるのは、その1インチをどれだけ細かくサンプリングするかです。

• 72 DPI — 歴史的なMacintoshの画面解像度で、1pt = 1pxになるよう正確に選ばれました。現在も一部の古い画像処理パイプラインで既定値として使われているため、12ptの文字が期待外れの12ピクセルで出力されることがあります。
• 96 DPI — Windowsの既定値であり、CSSが基準にしている参照解像度です。これがWebでの答えで、ブラウザーが使う値です。
• 150 DPI — 下書き印刷の品質、または遠くから読むことを想定した大判印刷です。
• 300 DPI — 商業印刷の標準です。300 DPIで出力する12ptのキャプションには、16ピクセルではなく50ピクセルの高さが必要です。
• 600 DPI — 精密な線画、高品質印刷、細い線が重要なレーザー出力に使われます。

「正しいサイズ」でアートワークを出力したのに、文字がぼやけたりピクセル化したりしたことがあるなら、ほとんどの場合この比率が原因です。レイアウトはポイントで測ったのに、ラスター画像が300 DPIではなく72または96 DPIで生成されていたのです。

ポイントサイズが実際に測るもの

12ptフォントは、目に見える文字が12ポイントあるという意味ではありません。ポイントサイズはemスクエア、つまり書体が描かれる見えないデザイン用グリッドを表します。その正方形を文字がどの程度使うかは書体デザイナー次第なので、同じポイントサイズに設定した2つのフォントでも、見た目の大きさが大きく異なることがあります。

CSSではptとpxのどちらを使うべきですか？

画面用のスタイルにはpxまたはremを使います。ポイントはCSSではpxと同じ絶対単位なので、アクセシビリティ上の同じ問題があります。ptでサイズを指定した文字は、閲覧者のブラウザーのフォントサイズ設定を無視します。また、同僚がスタイルシートを読んだとき、出力デバイス上の物理的なポイントを意味していると思い込む可能性があるため、ptは混乱を招きます。

ptが本当に役立つのは印刷用スタイルシートです。出力が実際にインチで測定されるからです。

@media print {
  body { font-size: 11pt; line-height: 1.45; }
  h1   { font-size: 24pt; }
  h2   { font-size: 18pt; }
  .no-print { display: none; }
}

印刷ジョブを生成するとき、ブラウザーはこれらのポイントを実際の用紙サイズに基づいて変換します。そのため、11ptの本文はページ上でも本当に11ptとなり、ワープロで作成した場合と同じサイズになります。

WordやInDesignの文書をWeb用に変換する

1. 文書のスタイルシートからポイントサイズをそのまま取り出します。通常は本文11pt、小見出し16pt、見出し24ptです。
2. 値をすべてカンマで区切って値欄に一度に貼り付け、解像度は96のままにします。
3. CSSピクセル列を読み取ります。11ptは14.67px、16ptは21.33px、24ptは32pxになります。
4. 公開前に、すっきりしたスケールに丸めます。印刷タイポグラフィでは奇妙な小数も許容されますが、Webの文字サイズは整数または0.5ピクセルのほうが読みやすいため、14.67pxは通常15pxまたは16pxになります。
5. デザインシステムが相対単位を使っている場合は、最終的なピクセル値をremに変換します。

関連するCSSの絶対単位

ポイントは、CSSが同じ96ピクセルの1インチを基準に定義している絶対単位の小さなグループの1つです。単位全体を知っていれば、変換は簡単です。

• 1in = 96px = 72pt = 6pc = 25.4mm
• 1pc（パイカ） = 12pt = 16px
• 1cm = 37.795px ≈ 28.35pt
• 1mm = 3.7795px ≈ 2.835pt
• 1Q（4分の1ミリメートル） = 0.945px

この変換器の使い方

1. 方向を選ぶ: pt → pxまたはpx → pt。
2. 値を入力する: 1つの数値、またはカンマや空白で区切った文字サイズ一覧（1回に最大20個）を入力します。12ptのような末尾の単位も受け付け、無視します。
3. 出力解像度を設定する: CSSやWeb用途では96 DPIのままにし、72、150、300、600 DPIのチップをタップします。
4. 「変換」をクリックする: 結果、DPI比較、実際のサイズでの文字プレビュー、ミリメートル定規、参考一覧を確認します。
5. CSSをコピーする: 1つのボタンですべてのfont-size宣言をコピーできます。元のポイント値はコメントとして残ります。

よくある質問

ptをpxに変換するにはどうすればよいですか？

ポイント値に出力解像度を掛けて72で割ります。1ポイントは1インチの72分の1だからです。Webでは解像度が96 DPIに固定されているため、px = pt × 1.3333です。たとえば12ptは16pxです。

12ptは何ピクセルですか？

CSSとすべてのブラウザーでは、12ptは正確に16pxです。300 DPIの印刷物や画像ファイルでは、同じ12ptの文字は50ピクセルの高さになり、600 DPIでは100ピクセルになります。ピクセル数は解像度に応じて変わりますが、物理サイズは変わりません。

1ptは常に1.3333pxですか？

CSSでは、CSS仕様が1インチを正確に96ピクセルと定めているため、常に1.3333pxです。ただしラスター出力では異なります。300 DPIでは1ポイントは4.1667デバイスピクセル、72 DPIでは正確に1ピクセルです。

ptとpxの違いは何ですか？

ポイントは1インチの72分の1に相当する物理的なタイポグラフィ単位で、印刷、ワープロ、DTPで使われます。ピクセルは表示単位です。CSSではピクセルも1インチの96分の1という物理的な基準に結び付けられているため、Webでは固定比率で変換できますが、画像ファイルではそうなりません。

CSSではptとpxのどちらを使うべきですか？

画面用のスタイルにはpxまたはremを使い、印刷用スタイルシートではptを使います。ポイントは絶対的な物理単位なので、ptで設定した文字は閲覧者のブラウザーのフォントサイズ設定を無視します。@media printブロック内では、出力が実際にインチで測定されるため、ptが自然な単位です。

印刷にはどのDPIを使うべきですか？

300 DPIは商業印刷と写真品質の出力の標準です。150 DPIは下書きや遠くから見る大判印刷に適しており、600 DPIは精密な線画や高品質印刷に使われます。プリンターやエクスポートダイアログが指定する値を解像度欄に設定してください。

画面上の12ptの文字は、なぜ高さが12ポイントにならないのですか？

ポイントサイズは、文字そのものの高さではなく、フォントの文字が描かれるデザイン用のグリッドであるemスクエアを表します。キャップハイトは通常emサイズの約70%、小文字のxハイトは約50%なので、12ptの大文字の高さはおよそ8.4ptです。

デバイスピクセル比はptからpxへの変換に影響しますか？

いいえ。2×または3×のディスプレイでも、ブラウザーは12ptを16 CSSピクセルとして扱い、その16 CSSピクセルを32または48個のハードウェアピクセルで描画します。CSSピクセルは基準単位なので、スタイルシートの数値は変わりません。余分なハードウェアピクセルによって、同じサイズがより鮮明に見えるだけです。

その他のリソース

• CSSの長さの単位 - MDN
• 絶対長 - W3C CSS Values