ときおり、コーディングにおいてpxを使うかremを使うか、SNS上で議論になることがありますが、今回の当サイトのリニューアルに関してremを基本単位でサイトを構成しました。単純なフォントサイズだけでなく、レイアウトやボーダーにもremを使いました。

HTMLのフォントサイズを基準とした相対指定

単位remはHTMLのフォントサイズを基準とした相対指定のサイズになります。ブラウザのデフォルトでは16pxが基準になります。remを使ったときの特徴として、HTMLのフォントサイズを変更したときに自動的に変更される、というのがあります。その他メリットやデメリットなどはSNSの議論に任せます。

今回この特徴を活用するのもサイトリニューアルのコンセプトとして含めました。

デバイスによってちょうど良いフォントサイズを変える

本文のちょうど良いフォントサイズはデバイスによって異なると思っています。PC環境であれば、16pxが、スマートフォン環境であれば14pxが個人的には最適かと思っています。（もちろん、ターゲットに合わせてその辺りは考慮するべきでしょう）

それだけであればメディアクエリで切り替えればよいのですが、なぜデバイスによってちょうど良いフォントサイズが変わるかと考えてみました。PCの16pxはスマホでは少し大きく感じました。それは1行あたりの文字数が少ないのと、そしてデバイス幅と目との距離がPCよりも近いからだと気づいたのです。

デバイス幅が広くなると距離は離れていきます。スマホ < タブレット < PCという順で遠くなっていきます。PCでもさらに、ノートPCと大きめのディスプレイのデスクトップPCではさらに遠くなります。デバイス幅と距離、そしてフォントサイズは比例するのです。

そこで1remを良いフォントサイズになるように、HTMLのフォントサイズを可変するようにしました。具体的には

html{
  font-size: calc(.815rem + .266vw);
}

という値をルートのフォントサイズとして指定しています。

実験的なデザイン

すべて文字サイズ基準でレイアウトしているので、どちらかというと組版に近いデザインルールかもしれません。必然的にすべてが相対指定になるので、ブラウザの設定で文字サイズを変更していもレイアウト崩れが起きません。どの文字サイズでも同じようなレイアウト（見え方）になります。

ただ、レイアウトをrem単位で構成したからっといって、アクセシビリティやデザインにおいて劇的なメリットがあるわけではありません。コンセプティブな実験的なデザインとして今回取り入れたところが大きいです。巷で時々話題になる、px or rem論争の一つの解答として作った次第です。