HTML見出しサイズのrem変換（H1からH6）

見出しサイズ：pxからremリファレンス

HTML見出しには、親要素のem倍数として定義されたブラウザデフォルトサイズがあります。px（16pxベースと仮定）に変換し、さらにremに変換すると以下のようになります：

ブラウザデフォルトの見出しサイズ

見出し	デフォルト（em）	px（ベース16）	rem
H1	2em	32px	2rem
H2	1.5em	24px	1.5rem
H3	1.17em	~18.7px	~1.17rem
H4	1em	16px	1rem
H5	0.83em	~13.3px	~0.83rem
H6	0.67em	~10.7px	~0.67rem

デザインシステムの見出しスケール

実際のプロジェクトではブラウザデフォルトを使うことは稀です。人気フレームワークの一般的な見出しスケールを紹介します：

Tailwind CSSタイポグラフィ：

クラス	サイズ	rem
text-4xl	36px	2.25rem
text-3xl	30px	1.875rem
text-2xl	24px	1.5rem
text-xl	20px	1.25rem
text-lg	18px	1.125rem

タイポグラフィスケール比率

プロフェッショナルなタイポグラフィでは、調和のとれた見出し階層を作成するために数学的比率を使用します：

• 長3度（1.25）： 16, 20, 25, 31.25 — 繊細でエレガント
• 完全4度（1.333）： 16, 21.3, 28.4, 37.9 — 汎用的、広く使用
• 黄金比（1.618）： 16, 25.9, 41.9, 67.8 — ドラマチック、エディトリアル

これらのスケールから生成されたrem値を使用すると、アクセシブルな状態を保ちながら一貫した視覚的リズムを確保できます。例えば、16pxベースの完全4度スケール：

:root {
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.333rem;    /* 21.3px */
  --text-xl: 1.777rem;    /* 28.4px */
  --text-2xl: 2.369rem;   /* 37.9px */
  --text-3xl: 3.157rem;   /* 50.5px */
}

行の高さのペアリング

各見出しサイズには適切な行の高さが必要です。一般的なルールとして、大きなテキストにはよりタイトな行の高さが必要です：

見出しサイズ	推奨行の高さ
32px+（2rem+）	1.1 – 1.2
24px（1.5rem）	1.2 – 1.3
18–20px	1.3 – 1.4
16px（1rem）	1.4 – 1.6