CSSフォントサイズの変換方法
元の数値とpx・em・pt・%のいずれかを選び、基準をpxで指定して変換します。4単位の結果が表示され、CSS接尾辞付きで個別にコピーできます。
基準値は1emと100%が何pxかを表します。親要素がfont-size: 20pxなら20を入力します。基準を変えるとemと%は変わりますが、pxとptの関係は変わりません。
計算の仕組み
いったんpxに直します。emは基準を掛け、%は基準を掛けて100で割り、ptは96÷72を掛けます。その後、逆の式で各単位にします。
内部計算は精度を保ち、表示では浮動小数点の不要な端数を除きます。非常に小さい正数も0にしません。
確認済みの2例
24px、基準16pxなら24px、1.5em、18pt、150%です。同じ基準で1.5emを変換すると24pxに戻ります。
125%、基準20pxなら25px、1.25em、18.75ptです。基準だけ16pxにすると同じ125%でも20px、15ptになります。
役立つ場面
デザインのpx指定を相対CSSへ移すとき、文字トークンを確認するとき、印刷のptをWeb用CSSへ移すときに使えます。親の計算済みサイズが分かれば継承した指定の確認にも使えます。
16pxはよくある初期値にすぎません。再現できるよう、結果と一緒に基準値も記録してください。
制限とよくある間違い
calc()、clamp()、変数、スタイルシート、rem、viewport単位は解析せず、実際のDOMも調べません。
%はfont-sizeとしてだけ扱います。widthやheightには使えません。負のフォントサイズと0の基準値はエラーです。
pt変換はCSS単位の関係であり、プリンターの物理ピクセルではありません。見た目の文字高はフォントやline-heightにも左右されます。
コピーした値の使い方
実際のコンポーネントに貼り、ブラウザーの文字拡大でも確認してください。相対単位への変換だけでコントラスト、折り返し、アクセシビリティが保証されるわけではありません。
計算はブラウザー内で行われ、入力値を解析イベントの引数として送りません。コピーが拒否された場合は表示値を選択できます。
対応しているすべてのCSSフォント単位変換
| 変換方向 | 基準16pxでの計算式 | 計算例 |
|---|---|---|
| ピクセル から Em (px から em) | em = px × 0.0625 | 1px = 0.0625em |
| ピクセル から ポイント (px から pt) | pt = px × 0.75 | 1px = 0.75pt |
| ピクセル から パーセント (px から %) | % = px × 6.25 | 1px = 6.25% |
| Em から ピクセル (em から px) | px = em × 16 | 1em = 16px |
| Em から ポイント (em から pt) | pt = em × 12 | 1em = 12pt |
| Em から パーセント (em から %) | % = em × 100 | 1em = 100% |
| ポイント から ピクセル (pt から px) | px ≈ pt × 1.333333333 | 1pt ≈ 1.333333333px |
| ポイント から Em (pt から em) | em ≈ pt × 0.08333333333 | 1pt ≈ 0.08333333333em |
| ポイント から パーセント (pt から %) | % ≈ pt × 8.333333333 | 1pt ≈ 8.333333333% |
| パーセント から ピクセル (% から px) | px = % × 0.16 | 1% = 0.16px |
| パーセント から Em (% から em) | em = % × 0.01 | 1% = 0.01em |
| パーセント から ポイント (% から pt) | pt ≈ % × 0.12 | 1% ≈ 0.12pt |
よくある質問
16pxは常に1emですか？
基準が16pxの場合だけです。基準20pxでは1emは20pxです。
基準を変えてもptが変わらないのはなぜですか？
emと%は相対単位ですが、CSSのpxとptは96px = 72ptで固定されています。
%の結果を幅に使えますか？
使えません。このページの%はfont-sizeの割合です。
コピー値が丸められるのはなぜですか？
実用上不要な小数ノイズを除くためです。計算自体は丸め前の値を使います。
remも変換できますか？
いいえ。対象はpx、em、pt、font-sizeの%だけです。