意識したいタイポグラフィの基本ルール

意識したいタイポグラフィの基本ルール

基本的なことばかりで且つwebでの使用についてがベースですが、タイポグラフィについてもう少し意識したいと思ったので再確認兼ねた備忘録です。

1. フォントの種類とサイズを増やしすぎない

サイト(ページ内)に一貫性・統一性をもたせるために、使用するフォントの種類とサイズは増やしすぎないようにしましょう。
使用するフォントの種類は基本的には1〜2種類、多くても3種類あれば十分なことがほとんどで、複数のフォントを使用する際には、組み合わせたときにお互いのデザインを引き立たせるような相性が良いものを採用するのが好ましいです。
また、フォントサイズの場合は、見出しのタイプ分のサイズ(例えば見出しが3タイプあるなら3サイズ)・本文などで使用する基本となるサイズ・注釈や補足などで使用する少し小さいサイズあたりが揃っていれば十分なことがほとんどです。

2. 様々なサイズに対応できているかを確認する

近年多種多様なデバイスが存在することによって、サイズ・解像度などユーザーの閲覧環境も様々です。
フォントの種類を選ぶ際は、フォントサイズが小さいときはもちろん、大きいサイズのときや太字にしたときにも読みやすいかどうかを確認する必要があります。
特に筆記体や少し変わったタイプフェイスを採用する場合には、ゴシック体や明朝体に比べてより注意する必要があります。

3. 重要度に応じて違いをつける

本文に比べて見出しはフォントサイズが大きくなっているのを見かけることが多いように、重要度に応じて違いをつけることでメリハリをつけることができます。
重要度が高いものに対して適用されるその他の方法としては太字にしたり下線をつけるなどで、逆に重要度が低いものに対してよくあるものとしては、フォントサイズを小さくしたりカラーを薄くする(本文の文字カラーが黒ならグレーにするなど)といった方法があります。

4. 装飾をしすぎない

上で見出しなどの重要度が高い部分については装飾を加えるなどして違いをつけることが好ましいとありましたが、逆にそうではない本文などで装飾をしすぎないように注意しましょう。
例えば、一部ではなく本文すべてにカラー指定をしたりシャドウを付けたりしているサイトを見かけることがあり、それがデザイン的にマッチしていて本文を読む妨げにもなっていなければいいですが、多くの場合はそれらがあることによって読み難い印象を受けます。

5. 本文にはシンプルで標準的なフォントを採用する

Google Fontsなどのサービスによって手軽に様々なデザインフォントを適用できるようになりましたが、何も考えずにデザイン性が強いフォントを長文の文章などで使用してしまうとユーザーによっては非常に読み難く、最悪の場合読むのを途中でやめて離脱する可能性もあります。
デザイン性の高いフォントは極力比較的文字数が少ない見出し部分などで使用し、内容をしっかり読んでほしい本文などについては多くのユーザーが読みやすいであろう標準的なフォントを採用しましょう。

6. すべてを大文字にすることを避ける

主に欧文を使用する場合、文字数の少ない見出しやユーザーに読ませる必要はない装飾的なものではなく、ユーザーにしっかりと読んでほしい本文についてはすべてを大文字にすることは避け、大文字と小文字を適切に使い分けましょう。
絶対ということではないですが、すべてが大文字で表記されていると読み難く内容が入ってこないというユーザーもいます。

7. 和文と欧文の組み合わせ時のサイズ・ウェイト

すべてのフォントがそうとは限りませんが、欧文フォントは同じサイズ・ウェイトを指定している和文フォントに比べてサイズやウェイトが少し小さく・細く見えることがあります。
また、それぞれのフォントが持つベースラインの違いによって和文と欧文では縦位置の基準がずれてしまい、文章のバランスが悪く見えてしまうこともあります。
和文と欧文を組み合わせて使う場合は、こういった問題が極力起きない組み合わせを選ぶのが好ましく、サイズ・ウェイト・ベースラインすべてが異なるけどこのフォントをどうしても使いたいというときには、そのまま使用するのではなくこれらの問題を少しでも解消した形で使用しましょう。

8. 長文は基本的に左に揃える

文字揃えでよく利用するものとして「左揃え」「右揃え」「中央揃え」「両端揃え」「均等割」などがありますが、人は多くの場合に視線を左から右へ移動させることや文章の頭や端が揃っていると読みやすく感じることから、特に長文の文章の場合には「左揃え」を用いるのが好ましいです。

サンプル #1

9. 1行の文字数

1行の文字数が少なすぎると行末から次の行頭までの視線の移動回数が多く、逆に文字数が多すぎると行末から次の行頭までの視線の移動距離が長くなってしまい、さらに文字数が多い場合には現在どの行を読んでいるかを見失ってしまう可能性もあります。
こういった問題を防ぐために、1行の文字数は可能な限り少なすぎず多すぎないようにするのが好ましいです。
全体のデザインテイストをはじめ、デバイス幅・フォントサイズ・フォントファミリーなどの関係で「絶対に○文字が丁度良い」というのは難しいですが、様々なところであげられている意見を見たり聞いたりしていると、1行に30~40文字程度(和文の場合)が適切と言われています。

サンプル #2

※イメージクリックで大きく表示。

10. 文字の間隔

行間や字間は、狭すぎると窮屈で読みづらい印象を与えて、逆に広すぎるとまとまりがなく間延びした印象を与えてしまいます。
見出しなど文字数が比較的少ない箇所やデザイン的な問題で意図的に広くすることもありますが、内容をしっかり読んでほしい本文などの箇所については行間・字間ともに狭すぎず広すぎない適切な間隔を設定しましょう。

サンプル #3
サンプル #4

Close the search window,
please press close button or esc key.