レスポンシブ・フォント・サイズの前提している状況が、2025年に至って変わりつつあるように思う。その状況とは、ブラウザーの閲覧領域(ビューポート)、特にその幅が閲覧中に変わらないということだ。幅がちょくちょく変化する状況では、レスポンシブ・フォント・サイズによって文字サイズが変化することは、レイアウトやフローがちょいちょい変化することに直結する。それがユーザー体験に与える影響は少なくないはずだ。
少し前まではデバイスの回転やフルスクリーンの切り替えなどでしか閲覧領域の幅は変わらなかった。しかし、昨年くらいからブラウザーの左右に様々なものが置かれるようになっている。具体的にはサイドバーとかサイドパネルとか呼ばれるものだ。それらがユーザーの行動によって切り替えられ、それに押されてちょくちょく幅が変わるようになった。対話型AIのブラウザーへの搭載が一番大きいが、それ以外にも色々ある。
これらサイドなんとかは、一時的と言うには少し長い時間、補助的と言うには少し広い大きさで使われる。開いたらそこでちょっとした作業を行い、しばらくしてからそれを閉じて戻ってくるというわけだ。作業途中でうっかり閉じたりされないよう、閲覧領域を狭めて開かれる。
ちょっと前までは瞬間的な利用で終わること(単語の翻訳とか)を想定して、オーバーレイのメニューやツールチップであることが多かった。そうでないやや複雑な作業なら、現在のページを丸ごと置き換えるか、新しいタブで開かれただろう。そのため閲覧領域の幅が変わることはなかった。
今の一般的なCSSの書き方だと、幅が変わると文字サイズが変わり、文字サイズが変わるとほぼ全てが変わる。リフローどころではない、文字数や行数の調節、折り返し位置の大幅な変更(text-wrap: balance;で顕著だ)、画像の大きさの調節と、レイアウトの切り替わり、などといった劇的な変化が起こる。そしてサイドなんとかは広くとられる傾向にある(私はブラウザーの半分くらいの幅で開いており、閲覧領域の幅は600px前後にまで減る)ので、より破壊的になるだろう。
もちろんそれで崩れてしまうようなウェブページは論外だが、きちんと「レスポンシブ」であっても、いや「レスポンシブ」だからこそ問題は起きる。これらを開く時は何か作業をする時で、その時に右や左でがちゃがちゃと色々切り替わってしまうと、作業への集中力が削がれてしまうという問題だ。長くて1秒もないくらいだろうが、いざ集中先を切り替えようという時に、元の場所で何か動きがあった場合、それを無視することは難しい。
もはや閲覧領域の幅に依存して文字サイズを変えてしまうと、つまりレスポンシブ・フォント・サイズを採用してしまうと、ユーザー体験が悪化するのではないか、と考えている。もしかすると以前のように初期の横幅に応じて動的にCSSを配布すると、文字サイズを柔軟にしつつ安定するので、使いやすい可能性すらある。どうせ見ないし操作しないので、横スクロールバーが出ても問題ない。ともあれ少なくともサイドなんとかが頻繁に切り替えられるということを想定したウェブデザインが求められ始めているとは感じる。
そんなこんなでmax(100%, 20px)というような閲覧領域に依存しない文字サイズ指定に回帰している。最低でも閲覧者が指定している文字サイズか20pxのどちらかになる。狭いスマフォ(幅400ピクセル以下)でやや大きいような気がするし、そのあたりを何とかしたいが、うまい方法を思いついていない。