見出しやキャッチコピーの文字を、置いた箱の幅ぴったりに収めたい。制作の現場では誰もが一度は悩む場面だが、これまではJavaScriptで幅を測って調整したり、文字数を数えてフォントサイズを手で決めたりと、面倒な手当てが必要だった。専用の小さなライブラリを読み込んで文字を伸縮させたり、どうしても揃わない箇所はテキストを画像にして逃げたりと、割り切りを迫られることも多かった。この地味な悩みに、CSSだけで答える新しいプロパティが登場した。

Chromeの開発者向けドキュメントによると、2026年6月30日に安定版となったChrome 150で text-fit プロパティが使えるようになった。テキストノードのフォントサイズを、それを包む箱の幅に合わせて自動で拡大縮小してくれる仕組みだという。文字が短ければ大きく、長ければ小さく、箱の横幅を埋めるようにブラウザ側が調整する。開発者が文字数を数えて刻む必要も、スクリプトで幅を測る必要もなくなるというわけだ。

可変長のテキストで効いてくる

この機能が生きるのは、入る文字の長さが事前に読めない場面だ。CMSで運用しているサイトの見出し、商品名やキャンペーン名のように毎回長さが変わるテキスト、複数言語で文字量が大きく違うページ。こうした箇所でフォントサイズを一定に保つと、短い文字はスカスカに見え、長い文字ははみ出してしまう。text-fit を当てておけば、どんな文字数でも横幅が揃い、ページ全体の見た目が安定する。

似たことを狙う手段として、これまでは clamp() やビューポート単位でフォントサイズを画面幅に連動させる書き方が使われてきた。ただしそれらはあくまで画面の広さに比例させるもので、実際に入っている文字の量には反応しない。text-fit は箱に収まる文字そのものを見て縮尺を決める点が違い、狙いがより素直だ。中小企業のサイトでも、トップのヒーロー見出しやバナーのコピーは案件ごとに長さがまちまちで、運用の途中で文言が差し替わると崩れやすい。ブラウザが幅に合わせてくれるなら、こうした崩れの心配が減り、入稿の自由度も上がる。

ただし今のところ対応しているのはChromeが先行している段階で、ほかのブラウザはこれからだ。すぐに全環境で頼るのではなく、対応していないブラウザでは通常のフォントサイズで表示されるよう土台を整えたうえで、対応環境だけ恩恵を受ける形で足すのが現実的だろう。導入する際も、極端に長い文言を入れたときに文字が小さくなりすぎて読みにくくならないか、想定される最大の長さで一度確認しておくと安心だ。閲覧者の環境によって見え方が変わる機能なので、主要な組み合わせでざっと表示を見ておく手間はかけておきたい。長らくJavaScriptに任せていた処理が、また一つ標準機能に取り込まれていく流れの一つとして覚えておきたい。