文字サイズから考えるデザイン

「Webは文書」という考え方でWebデザインを見ると、文字サイズを起点にレイアウトを考えられそう、という話です。

CSSで使える単位

CSSではさまざまな単位が使えます。画面上の距離を基準とした「px」、画面幅を基準とした「vw / vh」、親要素を基準にした「%」などです。その中で文字サイズを基準とした「rem / em」に注目してみましょう。

一文字のサイズを基準にするのが「em」です。大文字の「M」の活字が文字の縦横幅をいっぱいに使うことに由来しているそうです。

「一文字のサイズ」というだけではそれが何pxかは分からないですね。つまりこれは相対的なサイズというわけです。

「文字を読む体験」を主軸に考える

例えばセクションの間は160pxの余白を持たせる、というデザインがあったとします。デザイン上これくらい空いているとよい、というバランスで決めたものと推測できます。

この余白を160pxという距離ではなく、16pxの文字サイズ10個分の「10rem」とするとどうでしょう。文字10個分の間隔をおいて次のセクションに移動して欲しい、という意図を感じることができます。

デザインしたいのは物理的な距離ではなく「文字を読む体験」であるという考え方です。

セマンティックなCSS

CSSを書くとき、そのレイアウトの意味に対応したプロパティを使うことを「セマンティックなCSS」と考えてみてはどうでしょう。

見出しのサイズを32pxとせず、基準の16pxの倍のサイズ「2rem」と指定すれば、見出しと本文のバランスが2倍になっていると分かるわけです。

セマンティックなCSSを書いていれば、そのレイアウト指定はブラウザの領域を越えられる可能性があります。そこにピクセルがなくとも、文字のサイズを基準として記述されていればレイアウトが再現可能です。宇宙の果ての異星人にも伝わるレイアウトになるかもしれません。

異星人の例は極端ですが、相対的なレイアウト指定は可搬性が高く、予測しやすい指定であると言えそうです。