「フォントは、なんとなく見た目で選んでいる」——この記事は、配色と余白を通ってきた方への「Webデザイン」3本目です。読み終わる頃には、書体を選ぶ理由を自分の言葉で説明でき、本文の大きさと行間を数字で決められるようになります。

先に結論から。書体えらびで大事なのは、おしゃれかどうかではなく「その文章が、その人に読めるか」です。使う書体は2種類まで。差は太さと大きさでつける。本文は16ピクセル以上・行間1.8倍。この3つで、読みやすさの土台はできます。

書体は「文字の声」です

同じ「ありがとうございます」でも、低くゆっくりした声で言われるのと、明るく高い声で言われるのとでは、受け取る印象がまったく違います。言葉は同じなのに、伝わるものが変わる。書体は、文字が持っている声の高さです。

元気な求人ページに細く消え入りそうな書体を使えば、内容がどれだけ前向きでも小さな声で語られているように見えます。逆に、追悼のご挨拶に太くて丸い書体を使えば軽く見えてしまう。書体は、文章の内容と同じ方向を向いているかで選びます。

まず覚えるのは、ゴシックと明朝の2つだけ

日本語の書体は数え切れないほどありますが、入口では2つで足ります。ゴシック体は線の太さがどこも同じで飾りがなく、小さくしてもつぶれません。だからWebの本文はまずゴシック体が基本です。

明朝体は横の線が細く、縦の線が太く、はらいの飾りがあります。紙の長い文章や、落ち着いた印象を出したいときに向きます。ただし画面の中で小さく細く使うと、横線が消えて読めなくなる——ここが実務で一番つまずくところです。

もう1つ知っておきたいのが、見る人のパソコンに入っていない書体は表示できないという決まりです。そこでWebでは、書体そのものをサイト側から配る仕組みを使います。これをWebフォントと呼びます。CSSではfont-familyに書体名を並べて指定し、上から順に「あれば使う」と探していきます。

書体は2種類まで。差は「太さ」でつける

見出しと本文で違いを出したくなると、つい別の書体を持ってきたくなります。けれど書体を3つ4つと混ぜた画面は、まとまりを失います。1つの書体のまま、太さと大きさだけを変える——これで十分に差はつきます。

CSSではfont-weight: 700;で太く、font-size: 22px;で大きくします。見出しは大きく太く、本文は中くらい、注意書きは小さく細く。同じ声の人が、声の大きさだけを変えて話しているイメージです。

読みやすさを決める、3つの数字

本文の大きさは16ピクセル以上。パソコンの大きな画面で作っていると14ピクセルでも十分に見えますが、その画面をスマートフォンで開くと途端に小さくなります。行間はline-height: 1.8;あたり。日本語は漢字が詰まって見えるため、英語のページより広めにとります。

見落とされがちなのが1行の文字数です。パソコンで横幅いっぱいに文章を流すと、1行が60字を超えることがあります。すると読む人は行の終わりで次の行頭を見失います。私たちは本文の入る箱に幅の上限をつけて、1行を30〜40字に収めています。

CCの制作現場で、実際にあった話

私たちCCコミュニケーションズが、ある企業の会社案内ページを制作したときのことです。上品さを出したくて、本文を細い明朝体の14ピクセルで組みました。私たちの画面では、たしかに端正に見えていました。

ところが確認の場で、60代の社長が画面に顔を近づけて「これ、僕には読めないな」とおっしゃいました。その場で本文をゴシック体の16ピクセル、行間1.8倍に変えて見せると、「これなら読める」と即答されました。私たちの目に美しいことと、読む人に届くことは別物——この一言以来、私たちは本文の書体を決めるとき、必ず読む人の年齢層を先に確認します。

誰の目で確かめるかを、先に決める

依頼主のサイトを見るのは、依頼主でも私たちでもありません。求人サイトなら20代の応募者、士業のサイトなら相談に来る60代の方かもしれません。その人が眼鏡なしで読めるか、電車の中で読めるか——ここを確かめるまで、書体の選定は終わりません。文字を読みやすくすることは、その人が最後まで読んでくれる可能性を上げることです。

今日からできる、たった1つのこと

まとめ

書体は文字の声です。まずゴシックと明朝の2つを見分け、使う書体は2種類までにして、差は太さと大きさでつける。本文は16ピクセル以上・行間1.8倍・1行35字前後。おしゃれさより、その人に届くかどうかで選びます。私たちCCコミュニケーションズは、依頼主の目の前で文字を直しながら学べる環境で、Webデザインに進みたい仲間を探しています。