フォントpt⇔px変換計算機｜pt・px・em・rem・%・mmの相互換算

単位換算の基本式

絶対単位

1 pt = 1/72 inch = 0.3528 mm = 1.333 px (96dpi基準)
1 inch = 25.4 mm = 96 px = 72 pt
1 mm = 2.83 pt = 3.78 px = 4 Q (Quarterの意)

CSSの1pxは1/96 inchと定義されています(W3C CSS Values and Units)。実際の物理サイズは表示媒体の解像度で決まるため、印刷では1pt=1/72inchが絶対サイズ、Web画面では1pxがCSSピクセルとして相対的に扱われます。

相対単位

1 em = 親要素のフォントサイズ
1 rem = ルート(html)のフォントサイズ
100% = 親要素のフォントサイズ

ブラウザの初期フォントサイズは16px(=12pt)。この基準で1rem=16px、1em=親要素のサイズ、100%=親要素のサイズ、と換算されます。ルートを14pxに変えれば全remが14pxベースにシフトします。

組版単位

1 Q = 0.25 mm (日本の写植・DTP)
1 級 = 0.25 mm (Qと同じ)
1 号 = 家康時代の江戸尺(現在ほぼ非使用)

日本の写植・組版ではQ(=0.25mm)が今も使われます。特に新聞・雑誌・書籍組版で頻用され、印刷業界のInDesign設定では単位を「Q」に切り替えて作業する現場が多くあります。

Web/DTP/印刷での単位の役割

pt⇔px⇔em⇔rem 換算表(16px基準)

ルートフォントサイズ16pxを基準とした換算表です。ブラウザ初期値であり、Chrome/Safari/Firefoxの標準です。

用途別の推奨フォントサイズ

アクセシビリティとWCAG

W3CのWCAG 2.1(Web Content Accessibility Guidelines)では、テキストサイズと可読性に関する明確な推奨があります。

レスポンシブ設計とrem

モダンなCSSではフォントサイズをremで指定し、メディアクエリでルートサイズを可変にする手法が主流です。

html { font-size: 100%; } /* 16px */
body { font-size: 1rem; line-height: 1.7; }
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 1.75rem; } /* 28px */

@media (max-width: 640px) {
  html { font-size: 93.75%; } /* 15px */
}
@media (min-width: 1280px) {
  html { font-size: 106.25%; } /* 17px */
}

この方式では、メディアクエリでルートサイズを変えるだけで、rem単位で書かれた全ての要素が比例的にスケールします。ユーザーがブラウザ設定でフォントサイズを拡大した場合にも自動追随し、アクセシビリティも両立できます。clamp()を使えばビューポート幅で滑らかに補間することも可能です。

用途別の実務ポイント

よくある間違い

• Webで全部pxを使う — アクセシビリティ低下の主因。ユーザーのブラウザ設定に追随せず、視覚障害者・高齢者への配慮不足。rem基準にすればユーザー設定を尊重できます。
• フォームinputを14px以下に — iOSでフォームフォーカス時に画面が自動ズームされる仕様のため、16px以上が推奨。ユーザー体験を大きく損ないます。
• emの入れ子連鎖を無視 — em指定の要素の子要素でさらにemを使うと連鎖して意図せぬサイズに。remを使うか、entrey pointで統一しないと想定外の拡大縮小が起こります。
• DTPでpx指定 — Adobe InDesignは基本pt/Q/mm。Web出身の人がpx指定すると印刷実寸と合わず、A4紙面で違和感の原因になります。
• WCAGコントラスト比を無視 — 文字色と背景色のコントラスト比4.5:1未満は視認性を大きく損ない、Webサイト評価・SEOにもマイナス。総務省アクセシビリティ推進の基準にも抵触します。
• 1pt=1pxと誤解 — 1pt=1.333px(96dpi基準)が正しく、両者を混同するとサイズが25%ズレます。IllustratorのWeb書き出しなどで頻発するミスです。
• @media print非対応 — 画面用ptと印刷用ptを区別しないと、印刷時に文字が異常に小さくなります。@media printで別スタイルを用意しましょう。

関連する規格・仕様

• W3C CSS Values and Units Module Level 4 ― CSS単位の公式仕様。1px=1/96inch、em/rem/%の定義。
• W3C WCAG 2.1 ― Webアクセシビリティガイドライン。テキストサイズ200%拡大耐性、コントラスト比4.5:1などを規定。
• JIS X 8341-3:2016 ― 高齢者・障害者等配慮設計指針(Webコンテンツ)。日本国内のWebアクセシビリティ基準。
• JIS Z 8210 ― 案内用図記号。看板・掲示物のサイン標準。
• Adobe Type Terminology ― 印刷DTPの単位定義(pt/Q/mm)。
• ISO 15008 ― 車載表示装置の可読性基準。フォントサイズと視距離の関係。
• 総務省 みんなの公共サイト運用ガイドライン ― 政府・自治体サイトのアクセシビリティ推奨事項。

参考文献・公的資料

• W3C CSS Values and Units Module Level 4 ― CSS単位の公式仕様。px=1/96inch、em/rem/%の定義。
• W3C WCAG 2.1 Quick Reference ― Webアクセシビリティの国際基準。テキスト拡大・コントラスト・可読性。
• ウェブアクセシビリティ基盤委員会(WAIC) ― 日本のWebアクセシビリティ推進団体。JIS X 8341-3の解説。
• 総務省 みんなの公共サイト運用ガイドライン ― 政府・自治体サイトのアクセシビリティ推奨。
• 日本産業標準調査会(JISC) ― JIS X 8341-3・JIS Z 8210の公式索引。
• MDN Web Docs CSS単位 ― Mozilla FoundationのCSS単位解説ドキュメント。
• Google Material Design ― モバイル・Webのタイポグラフィガイドライン。dp/sp単位の基準。
• Apple Human Interface Guidelines ― iOS/macOSのタイポグラフィ推奨サイズ。
• Adobe InDesign 単位と増減値 ― DTPの単位設定リファレンス。
• 文部科学省 教科書の文字サイズ ― 学校教材の推奨フォントサイズ基準。

よくある質問（FAQ）

関連計算ツール