タイポグラフィ単位変換ツールとは？
タイポグラフィ単位変換ツールは、ピクセル（px）、em、rem、ポイント（pt）、パーセント（%）、ビューポート単位（vw、vh）を相互変換します。基準フォントサイズとビューポートサイズを設定し、任意のフィールドに値を入力すると、他の単位がすべて同時に更新されます。
換算は CSS の標準に従います。1pt = 96/72 px、em と rem は基準フォントサイズの倍数、パーセントは基準を 100% として扱い、vw と vh はビューポートの幅と高さの割合です。どれか 1 つの値を入れると他の 6 つが即時に再計算されます。基準フォントサイズの既定値は 16px(一般的なルート値)ですが、デザインシステムが 14、18、その他の値を使うならそれに合わせて変更でき、ビューポートの既定値は 1920×1080 なので vw と vh も正確に保たれます。
使い方
- ステップ1 — 基準フォントサイズをピクセルで設定します（デフォルトは16px）。em、rem、%などの相対単位の計算基準になります。
- ステップ2 — 7つの単位フィールド（px、em、rem、pt、%、vw、vh）のいずれかに数値を入力すると、他のすべての単位が即座に更新されます。
- ステップ3 — 変換された値をコピーして、CSS、デザイン仕様書、印刷レイアウトに使用します。
使用するタイミング
- 印刷デザイナーから受け取った pt 指定を、スタイルシートが実際に適用する CSS の px 値に変換するとき。
- デザインシステムを点検し、選んだルートで 1.25rem の見出しが意図どおり 20px になっているか確認するとき。
- 継承されたフォントサイズをすでに変えている親要素の中で、適切な em や % の値を決めるとき。
結果
デザイナーからポイント指定のスペック（本文14pt）を受け取りました。基準16pxでptフィールドに14と入力すると、18.67px、1.167em、1.167rem、116.7%と即座に表示され、スタイルシートにそのまま使えます。
よくある質問
- なぜ 1pt は 1px ではなく 1.333px になるの?
- CSS では 1pt = 1/72 インチ、1in = 96px と定義されているので、1pt = 96/72 = 1.333px です。これがすべてのブラウザで使われる換算です。pt の印刷サイズが画面上で数字よりも大きく見えるのは、この 4/3 倍率のためです。
- em と rem の違いは?
- rem は常にルート(<html> 要素)のフォントサイズを参照します。em は直近の親要素のフォントサイズを参照します。よって 20px の親の中で 2em は 40px ですが、2rem はネストにかかわらず常に 2 × ルートです。
- 基準フォントサイズの設定は換算にどう影響しますか?
- 1rem と 1em が何 px になるかが変わります。既定の 16px はほとんどのブラウザに一致するので 1rem = 16px。ルートを 18px にすれば 1rem = 18px、1.25rem の見出しは 20px ではなく 22.5px になります。pt は絶対単位なので影響を受けません。
- スタイルシートでは px、rem、em のどれを使えばいい?
- フォントサイズは rem(ブラウザの拡大やアクセシビリティ設定をユーザーが反映できるように)、ボーダーや微細な余白は精度重視で px、ボタン内側の padding のように現在要素のフォントサイズに連動させたい余白は em が向きます。
- px が基準値と同じなのに、なぜ % が 100% にならないの?
- 実際は 100% になります。base が 16 のときに px に 16 を入れれば % は 100 です。違う値が出るなら、別フィールドの丸めで px が厳密には base と一致していないか、px を入力したあとに base を変更したケースです。