Webサイトやアプリにとって、優れたタイポグラフィには、単なる書体の美しさ以上の意味があります。タイポグラフィは、コンテンツと視覚的に強い繋がりを持つと同時に、読みやすくなければなりません。
かなり難しい注文ですが、少し練習すればほとんどのデザイナーにできることです。
本記事では、素晴らしいタイポグラフィのユーザー体験を作り上げる10のルールを紹介します。それぞれのルールでは、タイポグラフィが魅力的なWebサイトの事例も挙げています。
読みやすさの原則
サンセリフ体やWebタイポグラフィを使わなければいけないという考えは時代遅れです。しかし、その思考の背後にある理念は重要です。テキストは、読みやすくなくてはいけないのです。
斬新な書体や中世風のブラックレターといった読みにくい書体は、原稿などでは避けたほうがいいでしょう。ただ、「芸術」として装飾的なスタイルを使いたいときは例外です。
読みやすい書体とは、流し読みしやすく、文字自体にあまり注意が向かないものです。こういった存在感の薄い「見えない」書体は非常に読みやすいために、ユーザーはレタリングについてまったく考えることがありません。これは単純に書体が機能しているからです。
行間を十分に取る
ユーザーが満足する体験を作る鍵の１つは、行間の高さです。行間はモバイルのWebサイトでは特に重要で、過剰に思えるほど行間を取ったほうが読みやすくなります。
行間の広さには、さまざまな要素が関係します。
- 文字の大きさ
- 文字の多さ
- スタイル
- スクリーンの広さ
残念ながら便利な公式はありませんが、次のことを参考にできます。
- ほとんどのWebサイトでは、行間を文字のサイズの約125％に設定しましょう
- モバイルのWebサイトでは、行間を文字のサイズの約150％に設定しましょう
- 流し読みしやすくするために、パラグラフの間には１行分スペースを取りましょう
- テキストが画面上でどのように見えるかテストして、「感覚」をたよりに縮めたり広げたりしましょう
スペースの広いフォントや、丸いフォントを選ぶ
大きくて丸いフォントは読みやすいです。また、“O”の内側の円が広い書体も読みやすいです。
一方で、きつく詰め込まれた書体を使うと、非常に読みにくくなります。上記の例のように幅が広いスタイルが読みやすいのは、１つひとつの文字を見分けやすいからです。丸いフォントは、子どもが読み書きを学ぶときに目にするような形であり、ユーザーにとって親しみやすいのです。
文字を大きくする
迷ったときは、快適に感じるサイズより少しだけ文字を大きくしましょう。文字の大きさは、どれだけの文章を表示する必要があるのかによって決定します。行の長さには特に注意を払いましょう。
デザイナーによって最適な文字数の意見は分かれますが、ほとんどは１行につき45～60文字が最適だと考えています。モバイルのタイポグラフィでは、この半分程度が一般的にです。
エックスハイトが高いフォントを使う
文字の高さ、特に小文字の高さによって、ユーザーがどれほど簡単にコンテンツを読めるかは大きく左右されます。
エックスハイト（x-height）とは、小文字のxの高さを表します。小文字の高さが大文字の高さに近い、つまりエックスハイトが高いフォントほど、一般的に読みやすいです。エックスハイトが、大文字の高さの2/3から3/4のフォントを見つけましょう。
カーニング
優れたカーニングは、優れたタイポグラフィを生みます。
本文のすべての文字をカーニングする時間はないでしょうし、する必要もありません。しかし、美しく見せたいタイポグラフィでは、カーニングにこだわりましょう。文字の組み合わせ１つひとつが完璧な位置関係になるよう調整するべきです。細部にこだわれば、この重要なステップを忘れてしまった多くのWebサイトと差別化できます。
比率を調整する
プロジェクトにおいて文字のスタイルを作り上げる際には、すべての比率を考慮することが大切です。複雑な計算が必要だと思うかもしれませんが、これを実行すれば、デザインの課題を大幅に軽減できます。
前出の行間もまた、比率の問題です。フォント、サブタイトル、タイトル、大きい装飾文字のサイズについて考えてみてください。簡単に文字のサイズを決め、視覚的な調和を生み出すために、これらの比率を揃えましょう。この過程は最初は複雑に感じられるかもしれませんが、Tuts Plusのチュートリアルを使えば理解しやすいでしょう。
文字の太さを揃える
書体では、文字の太さが大切になります。とても細いフォントは、コントラストが弱いため読みにくいです。逆に、線が太すぎるフォントも、目が酷使されるので同じような問題が浮上します。同様に、フォントの太さに極端な差があっても読みにくいです。
解決策は、比較的同じ太さの文字を採用することです。このようなスタイルは使いやすく、背景の選択肢を限定してしまうこともなく、一般的に読みやすさが安定しています。
書体の数を制限する
用いる書体の数は２つまでにしましょう。もう一度言います。書体は２つまでです。
これは、どのプロジェクトに対しても当てはまることです。書体が多すぎると、ユーザーが不快に感じます。ユーザーの目を酷使させ、非常に読みづらく、単純に目ざわりです。
２つの書体を選んだら、それらを使い続けましょう。もし美的な要素として必要であれば、３つ目を使用しても構いません。それぞれの書体の使用目的をしっかりと設定しましょう。この過程には、書体の色やサイズ、配置を決めることも含まれます。このデザインは、デバイスごとに、すべてのページを通して一貫しているべきです。
コントラストを強める
背景と文字のコントラストを最小限にしている流行のデザインがあります。そのようなサイトは、一見格好良いかもしれませんが、ユーザーフレンドリーでなく、読みにくいです。
コンテンツこそが、Webサイトに個性と価値をもたらします。ユーザーがすべての文字を簡単に読めるよう、背景と文字のコントラストを強めましょう。白や明るい背景の上に黒や暗い灰色の文字を使うのが一般的なのは、このような経緯があるからです。
Webサイトに使われる文字が多ければ多いほど、コントラストの重要性は高まります。文章を読んでいるときに目を細めなければならないとしたら、コントラストが弱すぎるか、文字が小さすぎるでしょう。Color Safeは、ほぼ完璧なコントラストの色の組み合わせを決めるのに役立つツールです（同時に、魅力的な見た目のWebサイトです）。
タイポグラフィは、素晴らしいユーザー体験を作り上げるたくさんの要素の１つなのです。
