タイポグラフィとは？文字を読みやすくデザインする14のポイントを紹介

タイポグラフィには2つの意味合いがある

タイポグラフィとは、もともと文字の体裁を整える活版印刷技術のことです。現在は、その定義が印刷物だけではなく、文字に関するもの全般に広がっています。

主に「文字を読みやすく美しく並べること」「文字をデザインとして扱うこと」の2つの意味で使われることが多いです。

文字を読みやすく美しく並べること

タイポグラフィという言葉は「文字を読みやすくするために美しく並べること」を意味しています。文字には何かしらの情報が含まれており、その情報を読み手にわかりやすく伝えなければいけません。

この記事のように文字の幅や行の感覚・文字の大きさなど、普段何気なく読んでいる文章も「読みやすさ」を考慮して並べられているのです。

タイポグラフィとは、誰が読んでもスラスラと読めて、文章の意味がスッと頭に入るような見た目にすることを指します。

文字をデザインとして扱うこと

タイポグラフィのもうひとつの意味は、文字そのものをデザインとして扱うことを指します。つまり文字列ではなく、文字が主役の芸術的な表現のことです。文字を使った企業ロゴや看板・道路標識などが当てはまります。

文字を使うデザインはイラストのような見え方をするものが多く、本業のデザイナーさんに依頼するようなアーティスティックなものと捉えておきましょう。

タイポグラフィの10個の基本ルール

タイポグラフィにおいて、文字を読みやすく並べるために必要な10個の基本ルールがあります。ここで紹介するルールを実践すれば、誰でも読みやすくてわかりやすい文章が書けるでしょう。

1. 読みやすい書体を使用する

タイポグラフィには、読みやすい書体を使用しましょう。そもそもの書体が読みにくいものであれば、いくら綺麗に並べても読みやすくはなりません。書体は、和文用・欧文用も含めると6,000種類以上あります。よく使われる基本的な書体は以下の4種類です。

和文用

欧文用

2. フォントのサイズや種類は揃える

フォントのサイズや種類は、バラバラにならないようにきちんと揃えましょう。揃っていないと、文章がガタガタになってしまい読みづらくなります。

フォントとは、ある書体を表現するための手段のことで、書体は一貫したデザインで構成された文字の集まりのことです。書体を骨格とするならば、フォントはその骨格を彩る肉付けといえます。

たくさんのフォントを使ってしまうと怪文書のように怖いイメージになるため、フォントの種類は2〜3種類に留めましょう。

3. タイトルや見出しは文字サイズを大きくする

タイトルや見出しは文字サイズを大きくして目立たせましょう。字の大きさや太さを変えると、その部分だけ強調されて「本文とは違うもの」ということが目で見てわかるからです。

文字を読むときは、目で見た内容を頭で理解するため、見た目の印象度が読者の理解度に大きく影響します。読みやすくて美しい文字にするには、メリハリを付けることが大切です。

4. 字間と行間は均等にして詰めすぎないようにする

文章は字間と行間を均等にして、詰めすぎないようにすることが大切です。字間とは文字と文字の間隔のことで、行間とは1行ずつの間隔のことを表します。間隔がバラバラになっていると、全体のバランスが悪くなりスラスラと読めません。

均等にしたからといって間隔を詰めすぎると、ギスギスとした印象になり自分のペースで読みづらいです。ある程度のゆとりを持たせることで、ストレスなく読めるようになります。

5. 文字色を変えたり下線を引いたりして適度に強調する

文字色を変えたり下線を引いたりして文章の中で適度に強調箇所を作ることで、文字列に緩急がつき、読みやすくてわかりやすい文章になります。

同じフォントで同じサイズの文字がひたすら続くと、目が滑ることが多いです。
「目が滑る」とは、文章に目を通してもその文章がなかなか頭に入ってこないことを指します。

単調な文章表現では、見た目が綺麗でも読者にとって理解しにくい文章となるため、太字や色分け・下線などを活用して見た目に刺激を与えましょう。

6. 文字色は黒を基本にする

文字色は、黒色を基本にしましょう。黒は可読性が高く、読者も読み慣れています。背景色が白の場合、黄色は視認性が低いです。赤色は強調箇所にはちょうど良いですが、全体を赤色にしてしまうと衝撃的なイメージを受けます。

文字色は黒色、背景色は白色、強調箇所に赤色や黄色を活用すると、全体的な色のバランスが良くなり、読みやすい文章になるでしょう。

7. 行頭・行末・中心など行を揃える

文章は行頭・行末・中心など、行を揃えることが大切です。行がガタガタになっていると、どこから読めばいいのかわからなくなります。

行を揃える方法は、行頭揃え・行末揃え・中心揃えの3種類。一般的な記事コンテンツは行頭揃えが基本です。「読みやすくするにはどうするべきか」を考えて、場合によって行末揃えや中心揃えも活用してみましょう。

8. 適切なタイミングで改行を入れる

文章量が多いものは、適切なタイミングで改行を入れましょう。改行を入れることで、読者がリズミカルに読めるからです。1つの文を区切るときは句読点を使いますが、何文も続く文章になると句読点だけでは区切りがわかりにくく読みづらいです。

見た目の印象も良くないため、改行は重要な要素と言えるでしょう。「何行に1回は改行する」といったルールを作ると、全体的に統一されたデザインになるためおすすめです。

9. 媒体のイメージに合ったフォントを選択する

フォントは、その文字を掲載する媒体のイメージに合ったものを選択しましょう。フォント自体から感じ取られるイメージと文章の内容が異なると、伝えたい内容がうまく伝わらなくなるからです。

個人ブログでは親しみやすさをイメージする「ヒラギノ角ゴシック」や「游ゴシック」研究論文では真面目で硬いイメージの「MS明朝」や「Times New Roman」などが挙げられます。

実際に伝えたいイメージをフォントに落とし込むことで、媒体や文章のメッセージをストレートに伝えられるでしょう。

10. 配色は3色以内にする

配色は3色以内にしましょう。文字色や背景色など色も情報の1つのため、4色以上使うと脳に負担がかかるからです。ベースカラー・アクセントカラー・サブカラーの3つで構成すると色のバランスが良くなり、情報を得る側が頭の中で処理しやすくなります。

記事コンテンツの場合は、背景色が白、文字色が黒、強調箇所に黄色のアンダーバーなどの3色でまとめると、シンプルで文章の内容に集中できるデザインになります。

タイポグラフィの4つの応用デザイン

タイポグラフィの「文字をデザインとして扱う」という観点から、記事コンテンツでも有効な4つの応用デザインを紹介します。

記事コンテンツで使用する場合は、画像データで作成して貼り付ける方法が良いでしょう。SEOを意識する場合、画像データよりもWebフォントのほうが評価に影響するため、目的を考慮して構成するのがおすすめです。

1. 縦組み・横組みをバランスよく組み合わせる

縦組み・横組みをバランスよく組み合わせる方法があります。一般的に文字コンテンツは縦組か横組のどちらか一方で構成されることが多いです。

週刊誌のタイトルで「週刊」だけ縦組みになっていることがあります。あのデザインのコツは、縦組の文字列の長さと横組の文字列の長さを合わせることでまとまりを出すことです。注目して欲しい箇所に最適なデザインです。

2. 文字の大きさを変えて強弱をつける

文字列の中でも、部分的に文字の大きさを変えて強弱を付ける手法があります。強調したい部分は大きく、そうではない部分を小さくみせるデザイン方法です。

イベントの紹介画像などで「◯月◯日」と日付を入れる際に「月」「日」を小さくすると、数字部分が強調されデザインもまとまります。

それ以外にも、注意点を小さくしたり、絶対に見てほしい部分を大きくしたりするデザインも多いです。文字の大きさを巧みに使い分けて、見る人にしっかりと伝わるデザインが求められます。

3. メインの書体と異なる書体を混ぜる

メインの書体に、まったく異なる書体を混ぜてアクセントを付けましょう。何気ないアクセントを入れることで、そのデザインが生まれ変わるからです。

和文主体のデザインに、差し色を使った欧文を重ねているデザインがあります。硬いイメージのデザインに柔らかさが加わり、バランスの良いデザインになるでしょう。さりげないアクセントひとつでデザイン全体がおしゃれになるため、ぜひ試してみてください。

4. 約物の間隔に注意する

文字列で約物を使用するときは、間隔に注意しましょう。約物とは「、」「。」「（）」など、句読点やかっこなどの記号のことです。

約物を原稿用紙に記載するとき、右上や左下、右側・左側などに書き、マスの中心には書きません。フォントサイズを合わせて、文字と一緒に並べると約物の部分だけ間隔が微妙に異なります。

デザインを考えたとき、この微妙な間隔のズレが気になることがあるため、文字サイズを変更して間隔を合わせるようにしましょう。

タイポグラフィの勉強方法

タイポグラフィの勉強方法には「スクールに通う」と「独学」の2つが挙げられます。芸術的な観点が問われるため、基本的なルールや簡単なテクニックなどの「基礎」をしっかりと身につけることが大切です。

基本ができなければ、誰もが思い付かない素晴らしいデザインが生まれることはありません。勉強して損をすることはないため、自分に合った勉強方法を見つけましょう。

専門のスクールに通う

専門のスクールに通う方法があります。スクールは、タイポグラフィのプロから直接フィードバックを受けられるためおすすめです。

他者が感じる意見やプロから見た感想など、多角的な意見をデザインに取り入れることができます。プロのアドバイスを直接聞けることは、スキル向上に役立つでしょう。

スクールに通うには、最低でも10万円程度の費用が必要です。学ぶ上での初期投資が必要になるため、目的をしっかり持って受講するといいでしょう。

本やWebサイトなどで独学する

本やWebサイトを利用して、独学する方法があります。スクールに通わないため、初期投資を抑えることが可能です。

一般的には、高い授業料が必要なスクールに通うよりも、独学を選択するケースが多くなっています。タイポグラフィについて詳しく書かれた本やWebサイトで、コツコツと自分のペースで進められます。

ただし独学ということは、勉強するタイミングや方法もすべてひとりで考えて行動しなければいけません。誰かが背中を押してくれるわけではないため、挫折してしまうケースも増えています。

まとめ

タイポグラフィには、文字を読みやすく美しく並べること、文字をデザインとして扱うことの2つの意味があります。大切なことは、読者にとって読みやすい文字列にすることです。デザイン性に優れていても、読みにくいようでは意味がありません。

この記事で紹介した14のポイントを参考にして、読者が読みやすい記事コンテンツやオリジナルのデザインを構築してみましょう。

比較ビズは、多数のホームページ制作・デザイン会社の中から自社にぴったりの業者を探せる無料の比較サイトです。必要な情報を入力すれば、全国各地のホームページ制作・デザイン会社を比較できます。ホームページ制作を考えている方は、ぜひ一度比較ビズを利用してください。

監修者のコメント

SUGI WORK

代表 杉山茂幸

山形県出身。埼玉県越谷市と山形県上山市の2拠点で活動中のフリーランス。開業5年目でSUGI WORK代表。国内・海外法人から行政案件まで経験。WEB制作をはじめ、デザイナー・エンジニア・出張撮影・ドローン空撮・取材・自社メディア運営など幅広い分野で活動中。中小企業の課題解決が得意。

詳しく見る

タイポグラフィを活用することで、ビジュアル的な観点での差別化を図りやすくなるメリットが期待できます。ユーモアや遊び心などを表現しやすくなるため、デザインやクリエイティブな業種・ベンチャー企業には積極的に導入をオススメしたい手法の1つだと思います。もちろん、それ以外の業種であっても社風や温度感が合えばタイポグラフィの導入はおすすめです。

余談になりますがタイポグラフィにアニメーションを組み合わせることでより魅力的で面白いコンテンツにすることが可能になります。ページ速度を重視する場合は使用しているサーバのスペックやコーディングの手法と要相談になりますが、1つの表現方法としてはおすすめしたい方法です。

執筆者

比較ビズ編集部では、BtoB向けに様々な業種の発注に役立つ情報を発信。「発注先の選び方を知りたい」「外注する際の費用相場を知りたい」といった疑問を編集部のメンバーが分かりやすく解説しています。