text-box-trim が使えるようになった：見出しの上下の余白を削る

タイポグラフィでずっと我慢してきた箇所がある。行ボックスは文字より高い、という問題だ。

フォントの ascent / descent は行送りのための指標であって、視覚的な境界ではない。だから line-height: 1.2 の見出しには、必ず「行の高さ − 文字の高さ」の半分が上に乗る。カードの中では「padding を書いていないのに見出しが上に張り付かない」という形で現れる。

これまでは何で埋めていたか

二通り、どちらも良くない。

• 負のマージンを手で調整する。margin-top: -0.6em の類。フォントやサイズを変えれば破綻する。
• em で見積もる。同じ当て推量を、より体裁よく書いただけ。

どちらも「フォント指標」をスタイルシートに焼き込んでいる。書体を変えるたびにやり直しになる。

今はこう書く

h1, h2, h3 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

trim-both は最初と最後の行ボックスを削る。text-box-edge はどこで切るかを指定する —— cap alphabetic は「上端をキャップハイトまで、下端をベースラインまで」。この二つの値でほとんどの見出しは足りる。

削る基準はフォント指標なので、書体が違えば削れる量も違う。これでいい。欲しいのは数値の揃いではなく、目の揃いだ。

三つの落とし穴

最初と最後の行しか効かない。 複数行の行間は line-height の担当。両者は競合しないが、text-box-trim に行送りを期待してはいけない。

ブロックレベルのボックスだけ。 インライン要素には独立した行ボックスの端がないので効かない。<span> を削りたければ display: block か inline-block にする。

日本語フォントの指標は粗い。 欧文はキャップハイトが明確だが、和文フォントは ascent を余裕をもって取ることが多く、削った結果が想定より詰まって見えることがある。全サイトに広げる前に、見出し一つで試す。

私の結論

見出しとボタンだけ。本文には使わない。

本文の一行目が容器の上端に張り付くと、むしろ窮屈に読める —— 本文にはその呼吸が要る。見出しやボタンはもともと「色の塊」で、その上下の余白はリズムではなくノイズだ。

これは text-wrap: balance に対する私の態度と同じである。タイポグラフィのプロパティは、数表ではなく目に見える問題を直すべきだ。 text-box-trim は、その「目の問題」を本当に直している数少ないプロパティだ。