ウィンドウや画面のサイズに合わせて文字の大きさを自動的に変更するテクニックは、俗にレスポンシブ・タイポグラフィーまたはフルイド・タイプと呼ばれている。当初は僕も良いアイディアだと思い多用していたが、重要なのはビューポートの大きさではなくデバイスとの距離だろうと思い直したためもうほとんど使うことはない。当初から嫌いといっていた人はこの辺にしっかりとした意識があったのだろう。
使うことをやめた理由は、単純に技術的制約によってユーザーとデバイスの距離を知るすべがないからに過ぎない。レスポンシブ・タイポグラフィーが目指す、適切な文字の大きさを環境ごとに提示することそのものについては正しい考え方であると思う。ただ今利用されている「ビューポートが768px以下なら文字を小さめにする」というようなアバウトな実装だと問題がある。もちろんvw単位を使ったフォント・サイズ指定でも同じだ。
なぜならばデスクトップPCでもそれくらいのビューポートになるようなウィンドウ・サイズでブラウザーを開いているかもしれないからだ。TwitterやFacebookを小さいウィンドウでデスクトップの端に表示しておくことはよくあるだろう。その場合ユーザーとデバイスの距離がある程度あるにもかかわらず文字が小さくなってしまうため、制作者が意図した読みやすさにはならない。iOS 9のアプリ分割表示なども(致命的ではなさそうではあるが)それに類する状況となるかもしれない。
つまりビューポートの大きさとデバイスとの距離は一貫した関係にないということだ。これくらいのビューポートならデバイスとの距離はこれくらいだろう、とはならない。つまりそういったギャップを想定していない実装には大きな問題があるということになる。
ユーザーとデバイスとの距離を決定付ける要因は以下の4つになるように思う。
- 画面サイズ
- タッチ操作可能かどうか
- 可搬性
- 重量
- 設置(利用)場所
1と2は今でも知ることができるが、3から5はなかなか難しそうだ。例えばSurface Hubのようなものは設置場所(壁か机か)によってユーザーとの距離が大きく変わるデバイスで、デバイスの特定が距離の判定にはつながらない。もちろん普通のSurfaceのようないわゆる2in1も机に置いて使う場合と手で持って使う場合で距離は変化するので、これもまた距離を判定することはできない。
ジャイロ・センサーのようなものがあるなら手に持たれているかどうかは判定可能だと思うので、レスポンシブ・タイポグラフィーは完全な絵空事とまでは言えない。しかし「レスポンシブ」と付くその魅惑的な名前とは裏腹に、今は実装が非常に難しい、またはほとんど不可能なテクニックであると言って良いだろう。
どうしても実装したいのならCSSで行うよりもJavaScriptでデバイス(ビューポートではなく)を特定し、ページ読み込み時に一度だけフォント・サイズを設定するというようなやり方が良さそうだ。デフォルトのフォントサイズをベースラインとして提供した上で、なんとかデバイスとの距離を判定することができそうなスマフォやデスクトップPCなどのみに限って調整してやるに留めるという形にできるだろう。
パフォーマンスや振る舞いを考えるとCSSで*-device-widthを使ってやりたいところだが、画面に直接触れるタブレット機器と触れることのないモバイル・ノートブックPCを同じにみなすことになりかねず、うまくいかないだろう。Media Queries 4で削除される方向で話が進んでいることも避ける理由になる(このあたりの話を聞いた時にデバイスとの距離を参照できる機能が追加されるというような話をどこかで聞いたような気がするが定かではない)。