ウェブ・タイポグラフィーのベスト・プラクティス

Translation of: The All-Inclusive Guide to Web Typography Best Practices

インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。

懸命なウェブ・デザイナーなら誰しもこのことは知っており、注意深くまた慎重に時間を費やし、作成中のウェブサイトでタイポグラフィーがきちんとなるようにしていることでしょう。その中では読者に機能的で魅力的であるようなタイポグラフィーを提供するため、ウェブサイトの情報アーキテクチャーを設計する際に様々な要素を考慮することになります。どのようなフォントが最も読みやすいのだろうか？　またどのようなフォントの方が流し読みしやすいだろうか？　見やすさについてはどうか？

こういった疑問や考慮すべき点は数多くあるため、ウェブサイトのタイポグラフィーを一発で決めることはとても難しいでしょう。しかし、私達はインターネットの中からSmashing Magazineによる現在におけるタイポグラフィーのベスト・プラクティスについての調査を見つけました。これは控えめにも目を見張らせると言うべきようなものでした。私達はこれを精査し、そのエッセンスをインターネットにおけるタイポグラフィーのベスト・プラクティスとしてまとめてみました。是非、堪能してください！

見出し

ウェブサイトにおいて見出しは最も重要だと間違いなく言えます。それは多くの人々がインターネットでは大見出しだけしか読まないというような残念な調査結果からもよくわかることでしょう。このように読者達が本文について気にすることがないことを考えると、見出しのタイプフェイスをよく目立たせ、読者の注意を惹き、もう少し続けて読んでもらえるようにしなくてはならないことになります。

上記2013年のSmashing Magazineの調査によると、見出しでサンセリフとセリフが使われる割合はほぼ互角で、51%がサンセリフ、47%がセリフとなっています。セリフ・フォントはここ数年でその利用が拡大していますが、その理由は見出しで使うことで目立ちやすいため、読者に面白そうな感じを醸し出すからでしょう。

見出しでもっともよく使われる二つのセリフ・フォントはGeorgiaとChaparral Proで、サンセリフだとArialとFreight Sans Proです。

ウェブサイトで見出しに使うタイプフェイスを独自のものにしようと考えているなら、これらのよく使われるフォントが読者に広く受け入れられていることを考慮するべきです。

本文

ウェブサイトの本文はあなたのコンテンツの大部分を構成することになるでしょう。大見出しや他の見出しに比べ、読んでくれる人はごく少ないでしょうが。見出しにおいてセリフとサンセリフの利用は拮抗しているのに対して、本文においてはセリフの方が明らかによく使われています。同じ調査によれば、61.5%のウェブサイトが本文にセリフ・フォントを利用しているのに比べ、サンセリフ・フォントを利用しているウェブサイトは36.5%に過ぎません。

もう少し詳しく読んでみると、セリフ・フォントの場合は見出しと同じようにGeorgiaとChaparral Proがよく使われているようです。対してサンセリフ・フォントではArialとHelveticaがよく使われているようです。

注目すべき点

調査には他にも注目すべき点があります。それは現在多くのウェブサイトがもはや標準フォント(訳注: システムにインストール済みのフォント)を利用していないということです。調査によると、本文においては39%のウェブサイトが、見出しにおいては66%のウェブサイトが標準フォントを使っていないようです。TypekitやFontdeckのようなウェブサービスを利用することにより、容易にブランディングのため競合他社と差をつけられるようになったということでしょう。

結論としては以下のようになります。標準フォントを利用することにより安全で「無害」にウェブサイトを制作できますが、多くの場合は安全で無害なことに寄せすぎている嫌いがあるということです。既に多くの読者があまり見かけないフォントの利用を気にすることはないため、それがウェブサイトにおけるユーザー体験を損なうことはないというわけです。

背景のこと

ウェブデザインにおいて妥当な背景とは、言わずもがな文字と適切なコントラストが確保されているかということです。適切にコントラストが確保されていると、読者は効率的に文章を読みとることが非常に簡単になり、それによって可読性が向上するわけです。Smashing Magazineの調査によると、多くのウェブサイトはダーク・オン・ライト、つまり明るい背景に暗い文字という組み合わせが多いようです。

しかしながら、明るい背景に暗い文字であることの本当に重要な点は、それがとげとげしさやどぎつさを感じさせにくいということです。例えば、あるウェブサイトではベージュの背景に暗いグレーの文字を使われています。この場合、コントラストは少し下がっていますが、それでも読者は快適に各行を読み進めていくことが可能でしょう。

ただし、本文においては、古くから愛用されている白い背景に黒い文字という組み合わせがいまだ最適な指針であることは間違いありません。

明確なコントラストによって読みやすいというだけでなく、白背景に黒文字というのは新聞のような由緒あるものを思い出させるということも、インターネットの本文において広く一般的なことの理由でしょう。

一般的な見出しのフォント・サイズ

少なくとも見出しに関する限り、間違いなく大きくすることが良いであろうという流行りになっています。平均的な見出しのフォント・サイズは38ピクセルくらいでしょう。Smashing Magazineによる2009年の調査と比べると、実に10ピクセルも大きくなっています。明らかに見出しだけを読むユーザーにアピールするために、より多くのウェブサイトが見出しの大きさを上昇させる必要があったということなのではないでしょうか。

このBootstrapBayのブログでは大見出しにはRobotoを28ピクセルで、他の見出しは24ピクセル、本文は16ピクセルというようになっています。見出しに使われるフォント・サイズの範囲が20から32ピクセルであることは指摘しておくべきでしょう。BootstrapBayのブログではその間をとったというわけです。

一般的な本文のフォント・サイズ

本文は見出しとは別物です。ですから見出しに比べ、本文のフォント・サイズは幾分小さいことは特に不思議なことではありません。しかし、本文においても流行のフォント・サイズは大きくなりつつあります。

調査によると、14ピクセルと16ピクセルのウェブサイトが同じくらいあるようです。2009年時点では、12ピクセルと14ピクセルのウェブサイトがほとんどだったことと比較して、ちょうど2ピクセル大きくなっていることになります。

BootstrapBayのブログでは16ピクセルを本文のフォント・サイズに採用しており、そのような変化し続けるタイポグラフィーにおけるトレンド(訳注: 原文ではbest practice)にマッチしているのではないかと思います。

大見出しと本文の比率は2.5くらいが主流です。基本的には、まず大見出しに使いたいフォント・サイズを調べ、それを本文のフォント・サイズで割ることで、この特に重要な比率を知ることができるでしょう。

最適な本文各行の長さ

一般的には、行が長くなればなるほど各行の高さを大きくするというルールがあります。

本文のフォント・サイズに1.46を掛けることによって最適な行の高さを計算することができるでしょう。その後、フォントの体裁を考慮して調節することになります。

更にその値に24.9を掛けると、今度は最適な行の長さを計算することができます。

ですが、本文を雑然とさせないようにするには、それだけでは十分ではありません。合わせてマージンやパディング、段落間(訳注: gutter)など、様々なタイプの余白を調節する必要もあるでしょう。

各行はどれ位の文字数か？

ウェブサイトが見て美しいと感じられるためには、特定の範囲に各行の文字数が収まっていることもまた重要です。調査によれば現在多くのウェブサイトは、十分に広い画面では平均83.9文字くらいだということです。

なぜこの文字数なのかというと、デザイナーは狭い画面での文字が表示される分量のことも考えて、フォント・サイズを調節しているからだと思われます。もしこの平均値より多い文字数にしたとすると、適切な行あたりの文字数を設定した場合に比べ、その読感はあまり良くないものに終わることでしょう。

平均値よりかなり大きな数に増やした場合、本文の内容がとても薄いものに見えてしまう危険性があります。逆に少なくしすぎた場合は、本文ががたがたになり、見出しを並べたような感じになってしまう危険性が高いでしょう。

レスポンシブ・デザイン

様々なデバイスでウェブサイトを閲覧する人々にとっては朗報があります。調査によると既に42%のウェブサイトがレスポンシブ・デザインを採用しているようです。100%にはまだ程遠い数字ですが、レスポンシブ・デザインがまだたった4年の歴史であることを考えると上々といえるでしょう。

この42%のウェブサイトはブラウザーのサイズによって様々なスケーリングが加わっています。そのスケーリングには、画像をブラウザーのサイズに収まるように調節するようなものや、メニューをアイコンに変更するもの、更には複数カラムのレイアウトをシングル・カラムに変化するものなど、大きなものから小さなものまで幅広いものが含まれます。

レスポンシブ・デザインを採用していない残りのウェブサイトは、モバイル専用ウェブサイトやモバイル・アプリに依存しています。通常は、読者にまずアプリをダウンロードさせたりモバイル専用ウェブサイトに移動させたりすることは、ウェブサイトがきちんと表示されるようにブラウザーをリサイズすることよりも面倒な作業です。読者がそのような作業を我慢し続けてくれるかどうかは、今にわかることでしょう。

まとめ

さて、以上で今現在のウェブ・タイポグラフィーがどのようなものなのかを知ることができたと思います。もちろんウェブ・デザインのトレンドはころころと変わるわけですが、この調査結果からわかるトレンドのうちいくつかはその将来的な変化を予測することも可能です。例えば見出しと本文のフォント・サイズの上昇は続くことでしょう。他にもこれからより多くのウェブサイトがレスポンシブ・デザインに移行し、これより数年は42%という数字もどんどん上がることが容易に予測できます。

ウェブ・デザイナーであるなら、ウェブサイトが読者に優しく、見て美しく、全般的に使いやすくなるためにいかにタイポグラフィーが重要であるかはよくわかっていることと思います。それでも派手でけばけばしいな画像や新しいデザインのトレンドなどを取り入れすぎないようによく気を付けましょう。この記事を通して、読みやすいフォントを使うというような基本こそがウェブ・デザインにおいて最も重要であることをわかってくれたでしょうか。

このガイドを通して得ることのできたベスト・プラクティスをまとめると以下のようになります。

次に新たなウェブサイトをデザインする時、フォントの取捨選択に多くの時間を割くようになってくれると幸いです。タイポグラフィーはすぐに劇的な変化をもたらすようなものではありませんが、これらのベスト・プラクティスに従いユーザー体験を重要視したのなら、その結果は光り輝くものになり得るでしょう。