100%読みやすい基準

10ピクセルのVerdanaが、画面幅640ピクセルの時代には理にかなっていたのは事実です。いまではそれは間違いです。小さいフォントサイズには、たしかにいくつかの立派な理由があります。ですが、上位3つを挙げるならこうです。

文字を小さくすればスクロールを避けられる
フォントサイズはいつでも調整できる
情報が詰まったページは情報量が豊かに見え、よりプロフェッショナルに見える

小さい文字サイズにしてスクロールを避けたいというなら、気にしすぎです。スクロールは問題ありません。本をめくるのだって同じです。文章が読めることのほうが大事です。「眼鏡をかけろ」と読者に言うのは冗談としては面白いですが、すでに眼鏡をかけている人には特にそうです。でも、顔を画面に貼り付けるように身をかがめてデザインするのは背中に悪いので、少し寄りかかって、楽な姿勢でデザインを続けてください。そうすれば、あなたのデザインも、あなた自身も、もっと楽になります。

もちろん、人はフォントサイズを調整できます。けれど、調整したいでしょうか。車に乗るたびにシートを毎回調整したいですか。ユーザーに毎回拡大してもらうことを期待するのは、それとよく似ています。アクセシビリティだけでなくフォントサイズを調整するというのは繊細な問題で、多くのユーザーはタイポグラフィの専門家ではありません。デザイナーが選ぶ文字サイズは、好みや個人的な思い込みとはほとんど関係があるべきではありません。視力に大きな問題がない限り、書体の読みやすさには、思うより狭い最適範囲があります。

あらゆる情報をユーザーに投げつけるのは怠慢ですし、混乱した体験を生みます。私たちはコンテンツについて考えるためにお金をもらっているのであって、何が重要で何が重要でないかを見極めるためにいるのです。

5つのシンプルなルール

1. 長文には標準サイズの文字を使う

多くのウェブサイトの文字がどれほど小さいかを実感したければ、普段読みやすい本を1冊用意し、その本の文字と画面上の文字がほぼ同じ大きさになるまでフォントサイズを変えてみてください。

本を画面のすぐ横に持てば大きく見えますが、楽に読める距離で持てばちょうどよく見えます。おめでとうございます。おそらく、ブラウザのデフォルトである100%あたり、もしくはそれ以上に落ち着いたはずです。読む距離を尊重する限り、これはデバイスをまたいでも通用します。

最初は大きめのフォントで見た目のきれいなレイアウトを作るのが難しいかもしれませんが、その難しさこそが、よりシンプルで明快なサイトづくりにつながります。誰だって情報を詰め込むことはできますが、シンプルで使いやすいものにするのは難しいのです。最初はデフォルトの文字の大きさに驚くでしょう。でも1日もすれば、それより小さい文字は見たくなくなり、なぜすべてのブラウザがデフォルト文字サイズを採用しているのかがすぐにわかります。

2. 能動的な余白

文章には呼吸させましょう。繰り返しますが、これは好みの話ではありません。

列幅は文字サイズに合わせるべきです。長すぎる列は目を疲れさせ、心理的にも悪影響があります。短すぎる列も、読む流れを断ち切ってしまうため、同じくらい気が散ります。 —Grid Systems in Graphic Design, Josef Müller-Brockmann

文字のまわりに余白があると、集中しやすくなるぶん、ストレスが減ります。ウィンドウ全体を埋める必要はありません。白い余白のほうがきれいに見えるのは、機能的なデザインの結果です。だれが、ウェブサイトは詰め込み式でなければならないと言ったのでしょう。

列幅の問題は、単なるデザインやフォーマットの問題ではありません。可読性の問題でもあるのです。 —Grid Systems in Graphic Design, Josef Müller-Brockmann

行の長さ、つまりテキストの列幅（「measure」とも呼ばれます）が広すぎないこと、そして左右に余白を取って、目が行から行へ移りやすくすることを忘れないでください。私たちはフォントサイズもウィンドウサイズもいちいち調整したくありません。サイトを開いたら、ただ読みたいだけなのです。伸縮する列幅は良いものですが、画面いっぱいにどこまでも続くテキスト行は良くありません。

目安としては、1行あたり10〜20語くらいに収めてください。デスクトップ向けのリキッドレイアウトでは、列幅をウィンドウ幅の50%くらいにするのが、まず試すべき基準です。

3. 読みやすい行間

行間は繊細な問題です。でも基本を押さえれば、かなり遠くまで行けます。

行間が狭すぎると、上下の行を同時に目に入れてしまうため、読む速度が落ちます。目は近すぎる行にうまく焦点を合わせられず、読者は余計なところでエネルギーを使って疲れやすくなります。行間が広すぎる場合も、同じことが起こります。 —Grid Systems in Graphic Design, Josef Müller-Brockmann

HTMLのデフォルトの行間は狭すぎます。行間を広げると、文字はより読みやすくなります。画面上の文字では、140%前後の行送りがよい目安です。

4. 明快な色のコントラスト

もしあなたがウェブデザイナーで、次のような組み合わせでも大丈夫だと思っているなら、仕事を変えることを考えたほうがいいかもしれません。

明るいグレーの文字を、さらに明るいグレーの背景に
銀色の文字を、雪のように白い背景に
グレーの文字を黄色の背景に
黄色の文字を赤の背景に
緑の文字を赤の背景に、などなど…

それでも自分はウェブデザイナーだと言い張るなら、存在していることが誰にもわからなくなるのを覚悟しなければなりません。なぜなら、あなたの言うことが誰にも読めないからです。では、何と入力しているのか見せてください。注: 低解像度の画面では、強すぎるコントラスト（真っ黒と真っ白）も理想的ではありません。文字がちらつき始めるからです。基準は #333 に対して #fff です。