24px の基準線でフォントサイズ系列を組む

基準線という思想

印刷物の世界では、すべての要素を一定の間隔（基準線）に揃えるのが伝統的な手法。Web でもこれを取り入れると、レイアウトの「気持ち悪さ」が減ります。

24px を選ぶ理由

8 / 12 / 16 / 24 / 32 / 48 のなかで、本文用に最も使い勝手がよいのは 24。

:root {
  --baseline: 24px;
}
.prose h1 { font-size: 36px; line-height: 48px; } /* 2 baselines */
.prose h2 { font-size: 24px; line-height: 36px; } /* 1.5 baselines */
.prose p  { font-size: 16px; line-height: 24px; } /* 1 baseline */

やってはいけないこと

• 中途半端な行送り（line-height: 1.7 などピクセルが揃わない値）を本文と見出しで混ぜる
• 図版や画像の高さを基準線に合わせない（落差で気持ち悪さが出る）

まとめ

基準線は「全部の要素を同じリズムに乗せる」ための不可視の線。可視化はされないけれど、読み手は無意識に感じ取ります。