H1・H2 見出しに text-wrap: balance を使う

CSS 1行で見出しをバランス調整

マーケティングページの成否は H1 にかかっていると言っても過言ではありません。「アクセシブルな / インターフェース」のように1単語だけが2行目に取り残された見出しはどう見ても素人っぽく、「アクセシブルな / インターフェースを構築」のような均等な見出しは意図して作られた印象を与えます。text-wrap: balance 登場以前は、ノーブレークスペース、手動の <wbr> 挿入、Adam Mordecai 氏の Balance Text のような JavaScript ライブラリを駆使する必要がありましたが、いずれも CMS 駆動でコピーが頻繁に変わるサイトには向きませんでした。

CSS

h1, h2 {
  text-wrap: balance;
  max-width: 30ch; /* 見出しは狭めにする */
}

アルゴリズムの仕組み

Chrome の実装ではコンテナ幅に対する二分探索が使われます。最大幅で自然に折り返した状態から始め、最も長い行と最も短い行の差が縮まるまで実効幅を段階的に狭めます。結果として、すべての行の長さが平均値に近い「ウィドウもオーファンもない」見出しが得られます。

6行の上限

アルゴリズムを軽量に保つため、主要なエンジンはいずれも balance を 6行までしか効かせません。それを超えた場合、プロパティは静かに無視されます。見出しはそもそも6行も折り返すことが稀なので問題ありませんが、本文には balance を頼ってはいけません。

line-height と組み合わせる

balance はタイトな line-height（見出しなら 1.1〜1.25）と組み合わせると最も効果が出ます。行間が広すぎると、バランス済みと未バランスの視覚的な差が分かりにくくなります。