CSSの文字組み革命！text-wrap: balanceとprettyで実現する美しいタイポグラフィ

📖 推定読了時間：約3分

Webデザインにおいて、見出しやテキストの「改行位置」は長年の悩みの種でした。スマートフォンの画面幅では綺麗な改行でも、タブレットやPCでは中途半端な位置で改行され、一行だけポツンとはみ出してしまう（ウィドウと呼ばれる状態）のは日常茶飯事です。

しかし、モダンCSSに新たに導入されたtext-wrap: balanceとtext-wrap: prettyプロパティが、この長年の課題に終止符を打ちます！これらは、JavaScriptによる計算や無数の <br> タグなしで、ブラウザ自身が最適な改行位置を計算してくれる画期的な機能です。

text-wrap: balance（見出しのバランス調整）

Webサイトの微細なタイポグラフィやレイアウト崩れを正確にチェックするには、高精細な コーディング・クリエイター向け4K 144Hz外部モニター や、柔軟に配置を変えられる クランプ式高耐荷重モニターアーム を活用したデスク環境が理想的です。

text-wrap: balance は、主に見出しや短いテキスト（数行程度のテキスト）に対して使用します。これを指定すると、ブラウザはテキストブロック内の各行の文字数がなるべく均等になるように（バランス良く）改行位置を自動計算します。

これまで、レスポンシブデザインで見出しのバランスを取るために、word-break や不要なマージンを調整して苦労していたのが嘘のように、どんな画面幅でも美しい逆ピラミッド型や均等な矩形に近い形にテキストが収まります。

balance は行の計算コストが高いため、ブラウザは通常「最大6行」または「最大4行」までのテキストブロックにしかこの計算を適用しません。長文の段落（pタグなど）には適用しないのがベストプラクティスです。

text-wrap: pretty（本文の美しさを追求）

文字組みや可読性の向上は、読者の滞在時間や離脱率改善にも直結します。デザインと集客を両立したい方は、Webサイト運営・SEOに関する入門書籍 を参考にコンテンツ設計を見直してみるのもおすすめです。

一方、長文の段落テキスト向けに設計されたのが text-wrap: pretty です。これは、段落の最後の行に「たった1単語だけ（あるいは数文字だけ）」が残ってしまうウィドウ（孤立行）を防ぐためのプロパティです。

• ✅text-wrap: balance：見出し（h1〜h6）や短いキャッチコピーに最適。行の長さを均等にする。
• ✅text-wrap: pretty：本文（p）に最適。最終行の孤立単語を防ぎ、自然な段落の終わりを作る。
• 👍どちらもCSSに1行追記するだけなので、既存のプロジェクトにも即座に導入できます。

まとめ

text-wrap: balance と pretty は、Web上のタイポグラフィ（文字組み）をDTPや印刷物に近づける非常に素晴らしいアップデートです。Chrome、Safari、Firefoxの主要モダンブラウザで既にサポートが整っており、すぐに実運用に投入できます。より読みやすく、美しいWebサイトを作るために、ぜひCSSの基本リセットルールに追加しておくことをお勧めします。