文字サイズにおけるOSとWebブラウザの連携

2024年8月22日 著

少し前に、Letting iOS "Text Size" Setting Affect Font Size on the Web - Frontend Masters Boostという記事を読みました。CSSでfont: -apple-system-body;を指定することにより、iOSの文字サイズ設定をSafariの文字サイズに反映させることができる、というのは知りませんでした。

しかし、それ自体は最近になってようやく可能となったわけではないのですね。記事からリンクされているDynamic Type on the Web • furbo.orgは今年7月の記事ですけど、そちらの記事が元ネタとして紹介しているUsing the System Font in Web Content | WebKitは、2015年7月の記事です。

私は老眼であるからして、iPhoneではiOSの設定で文字サイズを一回り大きくしています。ダイナミックタイプに対応しているアプリでは、その設定と連携し文字を大きく表示してくれるので、快適に使用することができます。逆にいうとダイナミックタイプに非対応の、ユーザーフレンドリーではないアプリは、簡単に見分けることができます。

ことWebブラウザ/WebViewで表示したWebページの文字サイズに関しては、OSの設定と連携しなくても、これまで特に疑問を持ってこなかったというか、半ば連携しないほうが自然な考えでいました。しかし、冒頭で触れた記事を読んだことで、本当にそれが望ましい状態なのかを考えるようになりました（老眼であるがゆえに！！）。

まずは自分のために、当サイトでfont: -apple-system-body;を指定しようかとも思ったのですけど、ベンダー接頭辞への忌避感からちょっと思いとどまって、そもそもWeb標準化の議論がどうなっているかを確認。結果、まだあまりまとまっていなさそうで、[css-fonts][css-viewport] UAs inconsistent in how OS font settings affect the default font-size `medium` · Issue #10674 · w3c/csswg-draftsの議論が固まるまで様子見（[css-fonts-5] Dynamic text size · Issue #3708 · w3c/csswg-draftsは既にクローズ）。