悪魔の所業
もはや廃れたものだと思っていたのだが、マイクロソフトの技術系ページで見てしまった1ので、ムカムカを解消すべく記載する。SQL Serverのバージョン情報を見る限り、15年くらいは古いページなんだけれど。
最初の間違い：ブラウザのフォントサイズが16pxだと想定している
そもそも、<html>のfont-sizeを62.5%としている根拠は何か。それはブラウザの標準フォントサイズが16pxだからだ。10/16 = 62.5%ということ。つまり、1rem = 10pxとしたいわけだ（これ自体に問題をはらんでいるのだが、説明は後回しにする）。
しかし、ブラウザの文字サイズは変更できる。3年前のものではあるが、3%ものユーザーがフォントサイズを変更しているというデータがある。ユーザーがブラウザのフォントサイズを1上げるだけで、設計が崩れる。
さらに、Webkit系ブラウザの等幅(monospace)フォントは他のフォントより3px小さく設定されている（相対的なサイズをユーザーが変更することはできない！）そしてお察しの通り、マイクロソフトは等幅フォントも16pxだと想定してCSSを組んでいるため、Chromeでは<code>要素の文字がやたら小さくなっている。読みづらいったらありゃしない！
また、4K以上の高解像度ディスプレイが普及していくにつれ、ブラウザがデフォルトフォントサイズを見直す可能性というのは否定できないだろう。16pxというなんとなく切りのいいだけの数字ではなく、20pxとか40pxのような人間的な計算がしやすい値になることも十分考えられる。大体、フルHDのディスプレイ（横幅1920px）は16pxの文字だと120em分に相当し、これは一般的に読みやすいとされる英文の文字数（50~75文字）の倍くらいある（そして、アルファベットの横幅は1emより狭いものが多い）。つまり、渡辺謙さんじゃないが世の中の文字は小さい！ 読みやすさを考えれば、現状でも1920 ÷ 60 = 32pxのフォントサイズが標準でもおかしくは無いのだ。もっとも、この話は単純な理想論で、大きい文字だからと言って読みやすいわけではないし、今までのWebとの互換性を維持するためにデフォルト文字サイズを変えることはしたがらないだろう。しかし、可能性は考えなければならない。
根本的な間違い：ピクセルベースでのデザイン
このデザインの致命的な欠陥は、本来レスポンシブデザイン用に考えられたrem単位を、従来のピクセルベースデザインの代替として使っていることだ。
rem、つまりルートのemは、htmlファイル自身の文字サイズを基準とした単位だ。しかし、このデザイン方法では62.5%とすることで、どこからも直接使われないフォントを設定していることになる。何をしたいかと言えば、今までpxでデザインしてきたホームページの単位をただ変えただけなのだ。
これは当然無駄な労力だし、rem本来の使われ方を無視しているとんでもないものだ。そして、pxベースでWebページを作っていくのも（まだ残存しているとはいえ）廃れていくべき手法である。
pxベースでWebページを作る罪はゆくゆく議論したいものであるが、今回言いたいことは<html>のfont-sizeを62.5%にするのはremをpxの代わりに使う、筋の悪い方法だよということである。
全く本題とは関係ないのだが、マイクロソフトホームページのCSSはいろいろとひどい。トップページのline-heightがpx指定されている。しかもそのline-heightを計算すると1.33...でアクセシビリティ基準を下回っている。line-heightが全く指定されていない箇所がある、など。そろそろブラウザのデフォルトline-heightを1.5に統一してほしいものなんだがね、Googleさん、Mozillaさん、Appleさん。 ↩
↧