ビューポートに応じてフォント・サイズを調節するCSSを生成してくれるUtopiaなるものを見ていた。基本のフォント・サイズを調整するだけでなく、スケールの倍率も調節している。こういう考えの実装はしたことがなかった。
デバイスの幅によって、同じフォント・サイズでもコンテンツの圧が変わる。スケールの調整でこの問題を解決したかったようだ。それだけでなく、小さい画面のデバイスと大きい画面のデバイスでは、ユーザーの目とスクリーンの距離も変わる。もしかするとこのあたりの課題も乗り越えられるのかもしれない。
ともかく、機械的にバリエーションのバリエーションを生成できるというのが目を引く。コンテンツのサイズに応じて柔軟に変化するように書けるFlexboxやGridとの相性も良い。特定のデバイスを意識しないCSSになっているところも、これまでのデバイスとこれからのデバイスの双方に優しいはずだ。
実装そのものは、既存のもののアレンジに過ぎず、あまり見るところはない。コードを追うのはかなり大変だ。カスタム・プロパティーの名前を見ると絶望する。やはり:rootだけで、つまりグローバル変数(的なもの)だけでやるとなると、こうなってしまう。Utopia自体はただ使うだけなので、見なかったことにすれば良いが、似たようなものを実装しようとするとなかなか辛そうだ。
body要素で基本のフォント・サイズを設定するので、余白などでrem単位が使えなくなる(使う意味がなくなる)という欠点がありそうだ。calc()でem単位をうまく計算すれば良いとも思うが、フォント・サイズと違ってフォールバックしなくてはならない。Sassなら問題ないかもしれない。
もうひとつ気を付ける点は、ブログでも触れられている通り、小さくする時に起こる問題があることだ。スケールが倍率の累乗で計算されていくことに原因があるので、どうしようもない。やはり倍率は固定した方が無難な気もしてくる。
しばらく前からこのウェブサイトでは、ルート要素で%を使って基本のフォント・サイズを段階的に設定するようになった。こうするとズームとユーザー指定のフォント・サイズ、rem単位の利用をすべて可能にする。その代わり、calc()でvw単位から%を作れないので、Utopiaのようにfluidに変化させることはできない。
min()とmax()を組み合わせてどうにかfluidにしようと格闘したこともあったが挫折した。もう一度考え直してみたい。