24pxをremに変換 — サブ見出しと大きなUI要素

24px = 1.5rem

24 / 16 = 1.5rem

24pxはWebデザインにおける万能な値で、本文テキストと大見出しの間に位置します。

24pxの一般的な用途

• H3 / H4見出し — 多くのデザインシステムがH3を24pxに設定
• 大きなボタン — 24pxフォントサイズのプライマリCTAは目立つ
• アイコンコンテナ — 24pxはMaterial Iconsや多くのアイコンシステムのデフォルトサイズ
• スペーシング — 24px（1.5rem）は8ポイントグリッドの自然なスペーシング単位（3 * 8 = 24）
• 行の高さ — 24pxは16px本文テキストの行の高さとして一般的（1.5行高比率）

フレームワークデフォルトでの24px

フレームワーク	トークン / クラス	値
Tailwind	text-2xl	1.5rem (24px)
Tailwind	w-6 / h-6	1.5rem (24px)
Material UI	h5バリアント	24px
Bootstrap	h4	~24px

8ポイントグリッドとの関連

24pxはGoogle Material Designや他の多くのフレームワークで使用される8ポイントグリッドシステムに完璧にフィットします：

8px  → 0.5rem   (1ユニット)
16px → 1rem     (2ユニット)
24px → 1.5rem   (3ユニット)
32px → 2rem     (4ユニット)

アイコンサイズ

24pxのアイコンサイズは業界標準です。Google Material Icons、Feather Icons、Lucide Iconsはすべて24pxをデフォルトとして使用しています。CSSでアイコンコンテナをスタイリングする際、24pxの代わりに1.5remを使用すると、ユーザーがフォントサイズを調整した場合にアイコンが周囲のテキストとともにスケーリングされます。

62.5%ベースでの24px

24 / 10 = 2.4rem