レスポンシブ対応で面倒なことの一つに”文字サイズの調整”があります。
キャッチコピーをかっこよく1行で表示したいのに、少し画面幅を変えるとエリアをはみ出してしまって、改行されてしまうことないですか？
もしくは少し小さめに作っていると、フルHDや2Kディスプレイで表示すると余白が大きくなって、かっこ悪くなってしまったりしますよね。

さらにそれを防ぐために、細かくメディアクエリを設定するのも大変面倒です。

「あ～文字サイズが自動調整されたら良いのに」って思いませんか？
font-sizeの自動調整はできま～す！

CSSで文字サイズの自動調整する時、font-sizeにもvwなどが使える

実はfont-sizeにもwidthなどで使用する”vw”を使用することができます。
なので、画面幅を基準にfont-sizeを決めてしまえば良いのです。

以下のサンプルを見てください。

See the Pen Untitled by Uilou (@uilou754) on CodePen.

見た目は何の変哲もないのですが、画面幅を変えると画面幅に応じて、文字サイズが変わるようになっています。

// 1文字が画面幅の1%
.font--1vw { font-size: 1vw; }
// 1文字が画面幅の2%
.font--2vw { font-size: 2vw; }
// 1文字が画面幅の3%
.font--3vw { font-size: 3vw; }
// 1文字が画面幅の4%
.font--4vw { font-size: 4vw; }
// 1文字が画面幅の5%
.font--5vw { font-size: 5vw; }

100vwが画面幅と同じ幅、1vwが画面幅の1%となっています。

文字サイズには計算フィールドを使うことも可能

文字サイズに計算フィールドを使うことも可能で、vwと組み合わせて使うことで、以下のような自動伸縮する文字を作ることが可能です。

See the Pen font-sizeの自動調整02 by Uilou (@uilou754) on CodePen.

.font--4word { font-size: calc(100vw / 4); }
.font--8word { font-size: calc(100vw / 8); }
.font--12word { font-size: calc(100vw / 12); }
.font--16word { font-size: calc(100vw / 16); }
.font--20word { font-size: calc(100vw / 20); }

画面幅を示す100vwに対して、文字数で割っています。

CSSによる文字サイズの自動調整が難しい点

ただ、vwって画面幅を基準としていて、親要素基準じゃないんですよね。
文字を画面いっぱいに表示する機会ってそんなに多くなくて、ほとんどはdiv要素などで囲って、その中に収めると思います。
しかし、そうなるとvwが使えなくて、だからと言って、計算フィールドに100% / 4とか入れてもうまくいかないんですよね。

どうにかならないものか・・・