Chrome 150で登場した text-fit、コンテナ幅に文字をぴったり合わせるCSSの新機能

デザインカンプ通りに、余白を作らず文字をコンテナ幅へぴったり敷き詰めたい。ランディングページのヒーローセクションやカードUIなどで、一度は誰もが頭を悩ませたことがあるのではないでしょうか。

先月リリースされたChrome 150では、background-clip: border-area や polygon() の角丸対応など注目のCSS機能が多数追加されましたが、この「文字のフィッティング問題」に終止符を打つ可能性を秘めたプロパティが盛り込まれました。それが、今回取り上げる text-fit です。

力技で乗り切ってきた

これまでこの手の文字サイズ調整は、力技で乗り切るしかありませんでした。

vw 単位の泥臭い調整：画面幅に応じたフォントサイズを指定し、実機で確認しながら「だいたいこのくらい」という数値を探す。
JSライブラリへの依存：FitTextやtextFitなどを読み込み、要素の実測幅とコンテナ幅を比較しながら font-size を動的に書き換える。
高度なCSSハック：CSSのカスタムプロパティと tan(atan2()) を組み合わせて、JSを使わずに擬似的なフィッティングを実現する手法。

特に話題となったのが、3つ目のCSS単体で実現するハックです。Roman Komarov氏が2025年に発表した記事を読んだとき、「ここまでやるのか」と慄き、発想の鋭さに感動したエンジニアは少なくないはず……。そうした泥臭い試行錯誤や高度なハックの積み重ねの先に、ついに登場したのが text-fit プロパティです。

text-fitってなんぞや？

基本となる書き方は非常にシンプルです。

.headline {
  /* 文字を拡大し、全行（最終行含む）を個別倍率でコンテナ幅に合わせる */
  text-fit: grow per-line-all;
}

grow / shrink：文字を拡大して合わせるか、縮小して合わせるかを決定。
consistent：コンテナ内で最も幅の広い行に合わせて全行を同じ倍率でスケール。
per-line：行ごとに個別の倍率で調整（最終行は対象外）。
per-line-all：最終行も含めて行ごとに個別スケール。

また、数値を添えることで拡大・縮小の上限・下限を設定できます。

.headline {
  /* 最大でも元のサイズの200%（2倍）までしか拡大しない */
  text-fit: grow per-line-all 200%;
}

無制限に伸び縮みされると困るデザイン現場は多いはずなので、この制限機能が標準で用意されているのは非常に実務的な配慮だと感じます。

似たような見た目を目指すアプローチとして、昔からある text-align: justify を思い浮かべる方もいらっしゃるかもしれません。justify は文字間や単語間の「余白」を調整して行末を揃えますが、text-fit は font-size のスケールそのものを変える仕組みです。アプローチが根本的に異なるため、見た目の迫力や印象もかなり変わってきます。

万能ではない？ text-fit の実態

手軽に使えるようになったのは間違いありませんが、これで過去の力技がすべて不要になるかというと、そう単純でもなさそうです。

仕様を読むと、text-fit はあくまで「算出された font-size の上に乗る倍率」であって、font-size の計算値そのものを書き換えるわけではないとされています。

つまり、line-height: 1.5em のような相対値には影響しません。

見た目の文字サイズと、CSSが内部的に把握している font-size との間に「計算上のズレ」が生まれるということです。このズレが、複雑なレイアウトや将来のブラウザ更新で意図しない挙動として顔を出す可能性は否定できません。

また、現時点ではChromeが先行して実装した段階であり、FirefoxやSafariへの普及はまだ先の話になりそうです。仕様自体も CSS Text Module Level 5 のドラフトとして議論が続いており、細部が今後変更される余地も残っています。

結局、どう使うのが正解？

見出しのような「多少のズレが出てもレイアウト崩れに繋がりにくい場所」や「可読性を損なわない箇所」であれば、今すぐ体験版や先行実装として試してみる価値は十分にあります。

一方で、フォールバック（未対応ブラウザへの配慮）をどう設計するかなど、実際のプロダクトへ組み込むにはもう少しブラウザ間の揃い踏みを待ちたいところです。

長年 JS や泥臭い CSS ハックで解決してきた「文字フィット問題」が、ついに標準 CSS 1行で完結する未来が見えてきたのは間違いなく大きな一歩ですよね。まずは個人のプロジェクトや実験室で、この快適さを味わってみてはいかがでしょうか。