ホームページのフォントの選び方。書体を探すほど、文章は読みにくくなる

書体を替えても印象が変わらない。そういう相談をよく受けます。ゴシックを明朝に替え、明朝を細いゴシックに替え、それでも読む気にならない。原因は書体の選択ではなく、文字の置かれ方にあることがほとんどです。

同じ書体でも、一行が長ければ読み飛ばされ、行間が詰まっていれば重く見えます。書体は、選ばれた瞬間ではなく、組まれた状態で印象を決めます。

おすすめのフォント一覧から選ぶと、なぜ決まらないのか

おすすめのフォントを並べた記事を見ながら選ぶと、たいてい選べません。

見本は、大きな文字で表示されています。見出しほどの大きさなら、書体の骨格の違いははっきり出ます。ところが実際に読まれる本文は、その半分以下の大きさです。本文の大きさまで縮めると、良い書体どうしの差はほとんど消えます。

もう一つの理由は、見本には環境が書かれていないことです。その書体が、どの端末で、どの太さで、何行にわたって使われた状態なのか。それが抜けたまま名前だけを持ち込むと、手元では美しく、実機では潰れます。

細い書体はとくに危険です。制作中の画面では上品に見えた細字が、明るい屋外のスマートフォンでは薄く飛びます。上品さは線の細さではなく、余白でつくるものです。

フォントで失敗するとき、選んだ書体が間違っていることは、ほとんどありません。
間違っているのは、その書体に与えた大きさと、一行の長さです。

見やすいフォントの正体は、書体ではなく一行の文字数

見やすいフォントにしたい、という要望の多くは、書体の問題ではありません。一行の長さの問題です。

日本語の本文は、一行がおよそ三十五字から四十五字のあいだで、いちばん楽に読めます。この幅を超えると、行の終わりから次の行の頭へ目を戻すときに、行を見失います。読み手はそれを「読みにくい」ではなく「なんとなく読む気がしない」と感じます。離脱は、読みにくさより先に、面倒くささとして起きます。

画面いっぱいに文字を流したページが読まれないのは、これが理由です。パソコンの横幅は年々広くなり、本文の一行はいつのまにか六十字を超えています。書体を上品なものに替えても、この一行が短くならないかぎり、読まれ方は変わりません。

行の間隔も同じ役割を持っています。日本語は漢字と仮名で文字の密度が高いぶん、欧文より広い行間を必要とします。本文であれば、文字の大きさの一・七倍から一・九倍あたりが落ち着きます。詰めると格好よく見えますが、それは見出しの話です。本文で詰めると、文字は塊になります。

スマートフォンでは、横幅が狭いぶん一行はおのずと二十数字に収まります。かわりに行数が増えます。同じ文章でも、画面が変われば目が折り返す回数が変わる。その差を吸収しているのが行間です。パソコンで詰めた行間のまま出すと、スマートフォンでは文章が一枚の黒い面に見えます。

まずは、本文の幅を狭くしてみてください。書体は一文字も変えないまま、読みやすさだけが変わります。

フォントサイズは、数字ではなく読む距離から決める

フォントサイズをいくつにするかは、数字で覚えないほうが早く決まります。

本文の大きさは、十六前後が長く標準として使われてきました。ただし、その数字が正しいのではありません。その数字が、腕を伸ばした距離でスマートフォンを見たときにちょうど読める大きさだった、というだけです。判断の基準は距離のほうにあります。

だから、印刷物の感覚をそのまま持ち込むと必ず小さくなります。紙は三十センチで読み、画面は四十センチ前後で読まれます。紙で美しかった大きさは、画面では一段小さい。

そして、小さくして困るのは本文ではなく、その下にある小さな文字のほうです。注記、料金の但し書き、フォームの説明文。ここを十二や十一まで落とすと、読める人が急に減ります。読ませたくない文字を小さくするのは設計ですが、読ませるべき文字が小さいのは事故です。

確かめ方は一つです。作りかけの画面をスマートフォンに送り、腕を伸ばして持ち、明るい場所に出る。手元のパソコンで判断しているかぎり、この間違いは見つかりません。

フォントの種類は、明朝かゴシックかを先に決めない

フォントの種類を決めるとき、多くの場合いちばん先に明朝かゴシックかを議論します。順番が逆です。

先に決めるのは、その画面で文字が主役かどうかです。写真が主役の画面では、文字は写真の邪魔をしない側に回ります。文章で説得する画面では、文字が主役になります。役割が決まると、書体の候補は自然に二つか三つに減ります。

そのうえでの目安はこうです。明朝は、線に強弱があるぶん、長い文章で表情が出ます。ただし細い横線を持っているので、小さくすると消えます。ゴシックは太さが均一で、小さくしても崩れません。かわりに、長い文章では単調になります。

だから、多くのブランドサイトは見出しに明朝、本文にゴシックで足ります。逆でも成立しますが、その場合は本文の大きさを一段上げてください。

書体の数は二つまでにします。三つ目を足したくなったときに必要なのは、たいてい書体ではなく、太さの差か、大きさの差か、余白です。同じ書体の中で太さを変えるほうが、別の書体を足すよりも整います。

そして、書体を切り替える境目は一箇所だけにしてください。見出しと本文で分けるなら、そこで終わり。ボタンの中や、注記や、フォームの項目名まで一つずつ別の書体にしていくと、ページ全体が寄せ集めに見えます。ブランドらしさは、書体の種類の多さではなく、同じ書体が最後まで続くことのほうから伝わります。

書体を足して整った画面を、私はまだ見たことがありません。
整うのはいつも、書体を一つ減らしたときです。

英語のフォントを混ぜるときだけ、大きさを疑う

英語のフォントを日本語と一緒に使うときは、一つだけ注意点があります。

同じ大きさを指定しても、欧文は日本語より小さく見えます。日本語の文字は正方形の枠いっぱいに書かれるのに対し、欧文はその枠の中に余白を持って収まるからです。日本語に合わせて指定すると、英語だけが痩せて見えます。

対処は簡単です。英語の部分だけ、わずかに大きくする。あるいは、わずかに太くする。数パーセントの差で揃います。

もう一つ、大文字だけで組んだ英語は、字と字のあいだを少し開けてください。大文字は縦線が多く、詰めると壁のようになります。ブランド名を大文字で置いたときに固く見えるのは、書体ではなく間隔のせいです。

そして、日本語のWebフォントは重い、という現実があります。文字数が桁違いに多いためです。全ページで読み込ませると、最初の一秒が沈黙します。使うのは見出しだけにして、本文は端末に入っている書体に任せる。この割り切りだけで、読み込みの体感はまったく変わります。

読みやすい文字は、書体を思い出させない

文字組みが決まっている画面では、読み終わったあとに書体の名前が残りません。残るのは、書いてあった内容だけです。

書体が記憶に残るときは、たいてい何かがずれています。太すぎるか、細すぎるか、行が長すぎるか、大きさが揃っていないか。読み手はその違和感を書体のせいだと思い、私たちも書体を替えて直そうとします。そして直りません。

順番はいつも同じです。一行の長さ、文字の大きさ、行の間隔。そこまで決めてから、最後に書体を選ぶ。

選ぶ書体は、退屈で構いません。退屈な書体で読ませきれた文章は、どんな書体に替えても読まれます。逆は成り立ちません。