タイポグラフィーのデザイン基本16ルール＆作り方。原則は時に”破られる”

「タイポグラフィー」という言葉は、主に2つの意味で使われています。ひとつは、文章を読みやすく見せるデザイン手法。もうひとつは、アーティスティックな文字デザインそれ自体。

タイポグラフィーの起源や構造を学ぶことで、デザインの深い意味づけができるようになります。デザイナーは、タイポグラフィーのルールや作り方の基本を知っておくべきでしょう。

今回はタイポグラフィーの解説とデザインのコツ、実際の作り方をご紹介します。

タイポグラフィーとは

▲出典：Jeison Barba

タイポグラフィには、主に2つの定義があります。

• 【文章を読みやすく見せるデザインの手法】
  文字の配置や並びによって、文章を読みやすくする手法です。文字間・行間などの余白をうまく使ったり、レイアウトを工夫したりして、文章を読みやすく配置します。
• 【アーティスティックな文字デザインそれ自体】
  ただの文字情報ではなく、文字自体をデザインに組み込んでしまうのもタイポグラフィです。色や太さを変えたり、文字のタッチを変えることで、全体として見たときに文字がデザインの一部となります。

iA Inc.創業者のOliver Reichensteinは「最適なタイポグラフィを選ぶことで、読みさすさ、アクセシビリティ、ユーザビリティ、全体のグラフィックのバランスなど、全てを最適化できる」と述べています。だからこそ、タイポグラフィーにこだわることは、どんなデザインプロジェクトにおいても重要なプロセスです。

タイポグラフィーデザインの基本16ルール

ここからは、タイポグラフィーをデザインする際の基本原則をおさらいしましょう。

1. 英字フォントの縦幅は「エックスハイト（x）」を基準にする

英字フォントにおいては、「エックスハイト」と呼ばれるひとつの基準があります。エックスハイトとは、小文字の「x」の縦の長さのことです。タイプフェイスをペアリングする際は、小文字の「x」の高さを基準に考えるのが良いです。

既存フォントでタイポグラフィーを作る際は、英字フォントの小文字が「x」の高さで統一されているかを意識してみましょう。

2. テキストフォントの横幅は1/72インチを基準にする

テキストフォントの横幅は「セット幅」と呼ばれており、全体の印象を大きく変える要素です。

最も一般的なのは、1ポイント辺りの横幅が1/72インチ。この基準は18世紀のころから採用されています。

3. 行間はフォントサイズの1.25〜1.50倍を基準にする

各タイプライン間の垂直方向のスペースは、「リーディング」といいます。これはかつて、メタルタイプの設定時に鉛のストリップを使用してラインを区切っていたためこの呼び名が使われていました。日本では「行間」の呼び名が一般的です。

基本原則として、行間はフォントサイズの1.25〜1.50倍に設定されます。

4. 文字間はカーニングとトラッキングを駆使してデザインする

▲出典：あかめ女子のwebメモ

個々の文字の組み合わせに対して、美しい並びを実現するために文字間のスペースを調整する行為を「カーニング」と呼びます。たとえば大文字のVと大文字のAを並べる場合、そのままだと余計なスペースが生まれてしまい美しくありません。そこで対角線のストロークをカーニングし、VとAの文字を詰めて表示します。これはタイポグラフィーデザイナーにとって、できるだけ早く習得すべきスキルのひとつです。

一方「トラッキング」は、まとまったテキストの文字間を調整する行為です。

5. 「セリフ」と「サンセリフ」どちらかを選ぶ

タイポグラフィーを決定するにあたり、字体の曲がり角にある飾り（うろこ）がある「セリフ(serif)」か、飾りのない「サンセリフ(sans-serif)」か選ぶ必要があります。

▲左：セリフ　右：サンセリフ（出典：UX Planet）

セリフかサンセリフで迷ったら、使用するテキストの長さを考慮しましょう。多くの場合、セリフは長文に適しています。文字についた飾りが、次の文字に目を滑らせる働きをしてくれるからです。

ターゲットオーディエンスも考慮しましょう。サンセリフは、児童などの文字を勉強している層や、視覚障害のある人々に好まれる傾向があります。

また、マイナーなWebブラウザでもデフォルトで入っている”Web safe fonts”を使用するのも無難です。サンセリフならば「Arial」「Tahoma」「Verdana」、セリフならば「Georgia」「Lucida」「Times New Roman」などが人気です。

6. フォントファミリーを考慮する

▲Helvetica Neueのフォントファミリー（出典：UX Planet）

フォントによっては、「親フォント」なるものが存在することもあります。共通する特徴の下、さまざまな異なるスタイルやウェイトを付与されたものです。

フォントを選択する際は、親フォントの規模を考慮しましょう。多くのプロジェクトでは2つのウェイトとイタリックさえあれば十分ですが、大きなプロジェクトでは視覚的ヒエラルキーを生み出すためにより多くのバリエーションが必要になります。

7. 重要度によって階層（ヒエラルキー）を分ける

▲出典：UX Planet

重要な情報と、それほど重要ではない情報がある場合は、情報に階層（ヒエラルキー）をつけるのがおすすめです。

大きい見出し / 小さい見出し、大きいボディタイプ / 小さいボディタイプを使用して各情報の重要度を区別し、読者の視線を適切にリードしましょう。

また文字の色や太さ、間隔を用いて階層を生み出すこともできます。

8. フォントを組み合わせる

▲Avenir NextとMerriweatherはおすすめの組み合わせ（出典：UX Planet）

異なるフォントを組み合わせることで、視覚的な階層を確立したタイポグラフィーを作れます。

ここでのポイントは「矛盾するふたつのフォント」「ほとんど区別できないふたつのフォント」を避けること。あくまでも全体的の一貫性を失わないように「相性の良い」「はっきりと違いがわかる」フォントを選択しましょう。

王道の組み合わせは、「似ている書体」かつ「セリフとサンセリフの違いがある」フォントです。その際、どちらのフォントにヒエラルキーがあるか、はっきりと分かるようにしましょう。サイズやウェイトを調整することで、フォントの優先順位が分かるようになります。

9. フォントの種類は最小限にする

▲複数のフォントを多用しすぎた例（出典：UX Planet）

複数のフォントを使用する場合、多くても3つまでに制限しましょう。本文にひとつ、タイトルにひとつ、最後のひとつは小見出しに……といった具合です。

すべてのフォントに統一感を持たせることができれば、異なる書体で自由に表現して大丈夫です。ただしよく似たふたつのフォントを使用すると、意図的にフォントを変更しているのか、単に間違っただけなのか、見る人に誤解されてしまうこともあります。

10. むやみに中央揃えにしない

デザイナーではない一般の人々は、なんでも中央に整列させたがる傾向にあります。中心に置いた方が、バランスがとれているように見えるからです。

しかしこれは最も効果の薄い、読みにくい配列ともいえます。行の頭に大きな凹み（インデント）がある場合は、段落を読み違う可能性もあります。

センターにタイポグラフィーを寄せる時は、意図を考え抜いた上で設定しましょう。

11. タイポグラフィーデザインの可読性を重視する

▲出典：Design your way

タイポグラフィーは、常に読みやすいものであるべきです。文字が読みにくければ、全体のデザインへの印象も悪くなってしまいます。

たとえば暗い背景に暗いテキストを合わせたデザインは読み取りづらく、おすすめできません。一方で派手すぎるフォントも、読み手にとってはやや不親切です。装飾的なフォントを使いたい場合は、タイトルやヘッドラインのみにとどめましょう。

▲「Vivaldi」フォントはオシャレだが、小さなスクリーンでは読みにくい

せっかくの印象的なタイポグラフィーデザインも、きちんとテキストが読めなければ無意味なものになってしまいます。

12. 適切な配色を心がける

▲出典：UX Planet

カラーは、デザイナーにとって最も強力なツールのひとつです。ただしデザイン全体を通して、慎重に考え抜かれた配色でなければ効果を発揮しません。

デザインにどんな色が適しているかを知りたければ、色彩心理学を掘り下げてみましょう。例えばオレンジは食欲を増加させる色と考えられており、ファーストフードのデザインに多く使用されています。

もちろん、既存の枠にとらわれない独創的な色使いは、パンチの効いた素晴らしい結果を生み出すこともあります。しかしフォントの色を華美にしすぎることで、ユーザーの気が散ってしまう可能性もあります。自身のブランドに合わせ、適切なスタイルを探しましょう。

13. 「はみ出し部分」を取り除く

▲出典：PHOTOSHOPVIP

デザインをネクストレベルまで高めてくれる方法のひとつに、段落組みをしたときに現れる「はみ出し」を失くすことが挙げられます。

段落組みの際に、ページ冒頭に前ページからの文章が飛び出してしてしまっている部分を「オルファン」、列をまたいで孤立してしまう部分を「ウィドー」と呼びます。

両者はどんなタイプのデザインにも現れますが、それらを上手く処理できれば、デザイナーとしての強力な武器になるでしょう。

14. 余白はただの空きスペースではない

▲出典：Beats by Dr.Dre

余白（ホワイトスペース）は、デザインを一段階上のものにするためには必ず意識すべき要素です。余白を賢く使うことで、最も重要な部分のみに焦点を当てられます。むやみにタイポグラフィーを入れすぎないことも大切です。

たとえば新製品のイヤホンのポスターの場合、キャンバス上にイヤホンの写真だけを置いてガジェットを強調することで、製品を際立たせられます。ノイズキャンセリングイヤフォンならば、イヤホンの画の周りに余白を多くとっておくことで、外のノイズが入ってこないことを表現できます。クレバーな表現だと思いませんか？

15. タイポグラフィーデザインの流行に便乗しない

デザインスタイルやその手法には、流行はあります。すぐに流行りに飛びつくデザイナーも多くいますが、ファッション業界と同じく、いつかは廃れてしまうものも多いです。

今日は人気でも、明日は誰も覚えていないかもしれません。ちょっと前に作成した 「時代を超越したデザイン」のタイポグラフィーが、今や時代遅れになっているかもしれません。

しかし、流行を一切追うなというわけではありません。流行のデザインには、何か必ず理由があるものです。デザイナーならその理由を調べ、本質的な部分を追求すべきでしょう。

タイポグラフィーにおける流行とは、むやみやたらに便乗するものではなく、注意深く分析すべき対象なのです。

16. さまざまなデザインからインスピレーションを得る

▲出典：JEN BARTEL

タイポグラフィーデザイナーにとって、インスピレーションを得ることはとても大事です。

一番おすすめなのは、既存のタイポグラフィーを分析すること。何がタイポグラフィーを効果的かつ魅力的にするかを知るには、オンライン上にある膨大な数のデザインを見ていくのがベストです。また、ふと目を惹いたグラフィックスやフォントを分析しても良いでしょう。

タイポグラフィーの作り方

ここからはIllustratorでタイポグラフィーを作る方法を簡易的にご紹介します。

1. 新規ドキュメントを立ち上げる

まずはIllustratorを起動し、「新規」ボタンをクリックします。画面上部にあるタブからカテゴリーを選択し、「空のドキュメントプリセット」を選択して下さい。

プリセットを選択すると、寸法・カラーモード・解像度等が、プロジェクトに応じてあらかじめ設定されています。カスタマイズが必要な場合は、「プリセットの詳細」で行いましょう。設定が完了したら「作成」をクリックし、新規ドキュメントを開きましょう。

2. ベースとなる文字を入力する

ここからいよいよ作成に入ります。文字ツールを選択して、アートボードをクリック。表示させたいテキストを入力し、プリセットのテキストと差し替えて下さい。

入力したテキストが表示されたら、テキストを対角にドラッグし、すべて選択します。上部のコントロールパネルで、フォント・スタイル・サイズを変更し、アレンジしてみましょう。

3. Adobe Typekitライブラリを使う

さらなる装飾を施したい場合、Adobe Typekitライブラリから好きなフォントを探し、「同期」をクリックして、コンピューターに追加します。そしてIllustratorで、フォントメニューから新しいTypekitフォントを選択します 。

4. 詳細をアレンジする

Escキーを押してテキストオブジェクトを選択し、右クリックメニューから「アウトラインを作成」を選択。次に字形を選択したまま、ダイレクト選択ツールを使用し、アンカーポイントを任意の方向にドラッグしましょう。

5. ai形式で保存する

作品が出来上がったら、「ファイル→保存」を選択。ファイル名を設定し、ai形式で保存します。Web上に投稿する際は、「ファイル→書き出し→スクリーン用」に書き出しを選択しましょう。ファイル形式を指定した後、「アートボードを書き出し」をクリックすれば完成です。

まとめ：基本ルールは、あくまで「基本」

タイポグラフィーの基本ルールは、優れたタイポグラフィーを作成するためのガイドラインでしかありません。

現存の素晴らしいタイポグラフィーのほとんどが、今回ご紹介した基本ルールをひとつかふたつは破った上で作られています。基本ルールをきちんと理解した上で、時にはルールを恐れずに突き破ってみましょう。

タイポグラフィーは、文章を読みやすくするだけでなく、タイプを配置する技術とそのアレンジメントからなるアートでもあるのです。

（執筆：Ayaka Takei, Mariko Sugita　参考：Typography Design: Rules, Ideas, and Principles to Create Good Type / 7 Things To Remember When Selecting Fonts For Your Design）

あわせて読みたい！▼