見出しの前には大きく空白があると読みやすいけど、見出しの直後に段落がくる場合は詰めたくなる。ウェブページでは、対応するmarginプロパティーの値を0にするだけで終わりにしてしまいがち。この詰めをちゃんと計算するとしっくりくる、かもしれない。
ウェブページでは余白の取り方を統一することが多いので、h2要素をmargin-bottom: 0;にしたり、h2 + pでmargin-top: 0;にしたりする。しかし、見出しの大きさや行の高さによって、見出しそのものの持つ空白が段落そのものが持つ空白と違うので、ユーザーによっては、詰まりすぎに見えたり、詰まらなさすぎに見えたりする。
これはCSSのline-heightプロパティーが文字の上下に空白を取る仕組みに由来する。問題とも言えるけど、これはこれで便利だったりすること(描画領域やフォント、文字サイズの違いに、公平にふるまう)もあるので、特性だろう。
例えば、見出しの文字サイズが24pxで、行の高さが30pxとする。また、段落の文字サイズが16pxで、行の高さが24pxとする。そうすると、見出しの下に(30px - 24px) / 2 = 3px、段落の上に(24px - 16px) / 2 = 4pxの余白が常に存在するので、単に両者の間の余白を0にするだけでは、段落内の行間(leadingからcap heightを引いたもの)に比べて1px足らない。つまり、この場合はユーザーに詰まりすぎに見えたりする。
行間と同じになるように、ちゃんと計算すると、しっくりくると思う。上記例の設定では、以下のように計算する。
h2 + p {
margin-top: calc(
24px - 16px -
(30px - 24px) / 2 -
(24px - 16px) / 2
);
}段落内での行間(24px - 16px)から、見出しの下の余白と、段落の上の余白を引く。見出しの文字サイズや行の高さに依存するので、結果は負の値になったりもするし、0になったりもするし、意外と大きな値になったりもする。これは一例に過ぎないけど、少なくともmargin-top: 0とするだけではダメだということは、なんとなく見えてくる。
実際にはもっと汎用化したい。対応するカスタム・プロパティーが定義済みとすると、以下のようにも書けるだろう。
h2 + p {
margin-top: calc(
(var(--line-height-p) - 1) * var(--font-size-p) -
(var(--line-height-h2) - 1) * var(--font-size-h2) / 2 -
(var(--line-height-p) - 1) * var(--font-size-p) / 2
);
}基準の行間も、見出し(手前の要素)の下の空白も、段落(自分)の上の空白も、計算できる。--line-height-*は単位なしである必要があるけど、だいたいそうしていると思うので問題ないだろう。ただ、--font-size-*はrem単位かpx単位などの、段落(自分)の文字サイズに影響を受けない単位である必要がある。もちろん、他のmarginプロパティーで使っている単位と同じだとなおいい。
将来的には、大文字の高さを参照するcap単位や、行の高さを参照するlh単位から、もっと汎用的なものも作れそうな気がしないでもない。それこそ、p要素で計算を設置しておけば、後は自動で調整してくれる仕組みとか、詰める専用のユーティリティー・クラスとかを作れる。ただ、他の要素の状態を参照しないといけないので、無理かもしれず、そうだとしたらちょっと残念。
このウェブサイトでは、雑記記事での見出しと投稿日時の間や、投稿一覧の日付とタイトルの間、ヘッダーやフッターが縦に重なる時の間などで使っている。おおまかに「セット」としてとらえてほしいもの同士の間で利用しているつもり。
まだ古い計算式で計算されてたり、間違った値を設定していたりする。この記事のタイトルは「見出しの～」だけど、小見出しと段落の間ではやめたりもした。文字サイズのバリエーションを減らしたので、ある程度の余白がないと、見出しが認識できないだろうと考え、やめてしまった。
また、似たような概念を、背景を塗りつぶした整形済みテキストや、図、表の上下の余白の調節にも使ってみている。こちらは標準の余白に、行間の半分を加えるというもので、「詰める」というより「空ける」。背景を塗りつぶしたり、表だったり、矩形をびっしりと埋めるものには、段落と違って、上下に行間の半分に相当する余白がない。それを加えることで、段落と表、表と段落などの間の余白と、段落と段落の間の余白を合わせてみようというわけ。
バーティカル・リズムは、このあたりのことも含んだタイポグラフィー理論だけれど、俯瞰した時と周辺視での美しさに寄ったもので、やはり紙媒体で真価を発揮する理論だと思う。スクロールする限定的な領域で、コンテンツを読み進めていくウェブページでは、俯瞰することはあまりない。また、ウェブページでは描画領域に従って画像の大きさが変化することが多いので、そこでリズムを維持するのは難しい。そして一部でリズムが崩れたら、台無しになってしまう。
このように、バーティカル・リズムの威力は、ウェブページでは限定的にしか発揮されないんじゃないかとずっと考えている。この記事で扱ったような、比較対象(段落内での行間)が近いもの(見出しと段落の間を詰めた時の空白)では、正しく発揮される。そう割り切って、一部に導入するのも選択肢のひとつだと思い、ちょくちょく使ってみている。