remの基準となる値を行の高さにする

remの基準となる値は、font-sizeよりも、line-heightのほうがいいのではと思って、ちょっと検索してみたけど見当たらなかったので、書いてみます。

グラフィックデザインの考え方としては、行の高さが縦方向のレイアウトの基準になります。例えば、小見出しは2行どりというように、行の高さを基準として考えるのです。これによって、段組のレイアウトをしても、行がずれることがありません。

行の高さはWebに当てはめるとline-heightになります。remはrootのemということで、文字の大きさの基準と考えることが多いわけですが、「htmlに指定したfont-sizeを基準として使える単位」と考えると、レイアウトの基準としていつでも使える値として設定したいのは、むしろline-heightなのではと思うわけです。

htmlのfont-sizeに、本文のフォントの大きさではなく、line-heightとして使いたい値を設定すると、例えば3行取りのスペースはシンプルに「3rem」で設定できます。2行取りの見出しは、line-heightを「2rem」にすればOK。

すべての縦方向のスペースを、行の高さを基準に、その整数倍で管理することができます。そして、段組を作ったときに、すべての段の行がきれいに揃います。ボーダーを使った場合には、微調整が必要になりますが。

以下のサンプルを見てみてください。
サンプル