font-sizeにvwを使う

未経験の(経験の浅い)方々のコードを見る機会があり、その中で一番驚いたのは、font-sizeにvwを使用していた人が多いことでした。

ということで、font-sizeにvwを使用することについて考えてみました。

あくまで個人の見解ですので、そういう考え方もあるんだーと思ってお読みください。

デザインのサイズを変えてしまう

そもそもデザイナーさんが16pxで作ったテキストを、実装者が勝手にサイズ変更してよいものなのか。

もちろん、デザイナーさんが「そうしてください」と言うのであればいいですが、そうでない場合に、勝手にサイズを変更するのはやはり良くないように思います。

もしサイズを変えて表示させるのであれば、サイズを変えていいか許可を事前に取るか、理由を述べてサイズを変えたと伝える必要はあるのではないでしょうか。

デザインを再現するということ

デザインをそっくりそのまま1pxも違えずにブラウザに表示させることが理想ですが、工数的にも予算的にも厳しいのが現実です。（個人的には±2pxくらいは許容範囲としています）

「デザインを再現する」ということは「どの幅でもそのまま拡大縮小させる」ということではありません。
もしそんな風に実装したとしたら、たとえば768pxのタブレットで1440pxのデザインを表示したとしたらどうなるか。

試しに、1440pxで16pxのテキストは768pxで何pxになるか、計算してみましょう。

16÷1440＝0.01111…
768×0.011＝8.5333…

どうやら8.5pxになるようです。
次に、コンテンツ幅が1000pxだった場合に、16pxのテキストを1000px以下でvw指定すると

16÷1000=0.016
768×0.016＝12

768pxの時に12pxになるようです。

このように、深く考えずにフォントサイズをvwで指定してしまうと、デザイナーさんが16pxでデザインしたテキストをタブレットでは8.5pxや12pxに変えてしまうことになります。

本当にこれでデザインを再現していると言っていいのでしょうか。

vwでフォントサイズを可変させる時に注意したいこと

前述した通り、デザインのアートボードの幅やコンテンツ幅に則って可変させてしまうと、どうしてもフォントサイズが小さくなりすぎてしまいがちです。
では、どのように指定するといいのでしょうか。

①可変するタイミング（ブレイクポイント）を意識する

たとえば800pxくらいでどうしても崩れちゃうというような場合には、800pxからスマホ用のデザインに切り替えるまでの間だけvwにしてしまうのはどうでしょうか。

スマホ用のデザインに切り替える幅（ブレイクポイント）を750pxとしていた場合、2vw（800pxで16px）のテキストは750pxで15pxとなります。

また、1280px、960px、640pxのように複数ブレイクポイントを指定して段階的にフォントサイズを変化させていくのはどうでしょうか。

1280pxで16pxのテキストを960pxで15px、640pxで14pxにしたい場合は

font-size: 1rem; /* 16px */

@media (max-width: 1280px) {
  font-size: min(1.56vw,16px);
}

@media (max-width: 960px) {
  font-size: min(2.19vw,15px);
}

@media (max-width: 640px) {
  font-size: .875rem; /* 14px */
}

上記のように指定してもいいかもしれません。（実務で使う場合はもう少し精査すべきかなとも思います）

②変化率を意識する

16pxのテキストを1000px～750pxの間でフォントサイズをvwで可変させながら、最小値は14pxにしたい場合に、ただvwで指定してもすぐに14pxに到達してしまいサイズを可変させた恩恵があまり受けられないということになってしまいます。（この例だと875pxで14pxになります）

このような場合には

0.5rem + 0.8vw

のようにremとvwを組み合わせて指定することで変化を緩やかに調整できます。
ちなみにCSSのclamp関数を利用して

font-size: clamp(0.875rem, 0.5rem + 0.8vw, 1rem);

と記述すればメディアクエリを使わないでフォントサイズを可変にしつつ最大値と最小値をコントロールすることが可能です。いやはや便利になりましたね。

ちなみにこの値はジェネレータを利用したので、その計算方法はよくわかってません。

Font-size clamp() generator

それでもやっぱり気になる点

フォントサイズをvwで指定するのは個人的には好きではないので、どうしようもない時の最終手段にしています。
なぜならvwやpxなどでフォントサイズを指定してしまうと、ユーザーがブラウザのフォントサイズの設定を変更していても、それを無視してしまうことになるからです。

体験談

私の父がガラケーからスマホに変えた時のことです。
スマホには文字を大きく表示する設定が用意されており、やはりデフォルトのフォントサイズでは使いにくいという父のためにフォントサイズを最大に設定してあげました。メニューやらなんやらの文字が大きくなってこれは見やすいと喜んだのも束の間、ブラウザで開いたWebサイトの表示が……

たまたまその時見たサイトが良くなかった可能性はありますが、やはりフォントサイズはremにした方がいい（remでも崩れないように）とその時感じました。

ユーザーのための実装を

Webサイトやアプリはユーザーのためにあってほしいというのが私の考えです。ただデザインの都合でどうしようもない時はありますので、柔軟に対応していけたらと思います。

レスポンシブ対応はコーディングの中でも難しい部分です。まだ経験が浅い方々は自己判断せずにまずはディレクターさんやデザイナーさんに相談（質問）してみてください。

そして少しでもユーザーの使いやすさ（ユーザビリティ）を意識してコーディングしてもらえればと願います。