タイポグラフィとは？デザインを意識した基本ルールとポイント

2024.05.22 2019.08.15印刷・デザイン

Pocket

デザインを考える上で、「文字」の与える影響は非常に大きいです。

同じ内容が書いてあっても、読みやすく配置されたテキストの方が良いイメージを与えてくれます。また、文字そのものをデザイン要素として配置することで、内容をより印象づけることができます。

この記事では、デザインにタイポグラフィをもちいる際の基本ルールとポイントをご紹介します。デザインに関わる業務の方は、ぜひ参考にしてください。

1 タイポグラフィとは？
2 Webサイト（ページ）と印刷物でのタイポグラフィの違い
3 ユーザーが読みやすいように美しく文字を配置するポイント
4 文字をデザイン要素として利用するポイント
5 おわりに

タイポグラフィとは？

タイポグラフィとは、もともと活版印刷の技術の一つでした。活字の配置やフォントサイズ、行間、レイアウトを調整することで、印刷物の読みやすさや見た目の美しさが得られます。

現在では、印刷物だけでなくWebデザインなど幅広い分野でデザインの要素として重視されています。具体的には、「文字を美しく、読みやすく配置すること」「文字をデザイン要素としてもちいること」という2つの意味で使われています。

「文字を美しく、読みやすく配置すること」は、文字のフォントや太さ、字間や余白によってレイアウトを調整することです。

「文字をデザイン要素としてもちいること」は、文字を芸術のようにデザインすることです。文字というより、イラストのような見え方で、デザインに華やかさをプラスします。以下のようなイメージです。

それぞれの具体的な手法については、後述します。

Webサイト（ページ）と印刷物でのタイポグラフィの違い

タイポグラフィは、印刷物だけでなくWeb媒体などさまざまな分野で使われる技術です。基本的に媒体を問わず考え方は同じですが、Webサイトの場合は特に見え方に注意を払う必要があります。

Webサイトの場合、デバイスやブラウザが見る人によって違うため、想定したデザインと違う配置になる可能性があるからです。ディスプレイサイズによっても、見え方や印象は大きく変わってきます。

一旦レイアウトをして完了するのではなく、デバイスやブラウザを変えて見え方を確認し、全てで納得できる表現を模索する必要があります。

ユーザーが読みやすいように美しく文字を配置するポイント

タイポグラフィの要素の一つ、「文字を美しく、読みやすく配置する」ために意識したいポイントを5つご紹介します。

ターゲットや制作物にあったイメージのフォントを利用する

伝えたいイメージと、フォントのイメージが合致しているかどうかを意識しましょう。日本語フォントは、「明朝体」と「ゴシック体」という2つの書体に大別できます。

一般的に明朝体は和風、上品、女性的というイメージがあります。ゴシック体はスマート、都会的、目立つという印象があります。ゴシック体の角を丸めた丸ゴシック体は、ゴシック体の印象に加えて優しさやソフトさを感じさせます。

他にも手書き風フォントやポップ体など、デザイン性の高いフォントもあるので、遊び心や面白さを表現したい場合は必要に応じて導入するのも良いでしょう。ただし、デザイン性が高いほど読みにくくなるので、見出しやキャッチなどの大きい部分だけの使用に留め、本文そのものは明朝体やゴシックにするのが無難です。

⇒印刷物で読まれるためのフォントの使い方と注意点

さまざまなフォントを使いすぎない

さまざまなイメージを伝えられるからと、使用するフォントを増やしすぎるのは逆効果です。統一感が失われるのでまとまりのないデザインになってしまいます。

適切なフォントサイズにする

フォントの大きさを調整することで、文章全体にリズムが生まれ、読みやすさがアップします。どこに注目して読めばよいか一目瞭然になるからです。

重要な部分は文字色を変える、太字強調をするというのも有効です。ただ、これらも要素が多すぎるとちぐはぐな印象を与え、余計に読みにくくなってしまいます。使う際には注意しましょう。

行の始まりなどの位置を揃える

テキスト要素が多い際には左寄せにし、なおかつ行の始まり位置を揃えましょう。縦の線に限らず、水平に配置するときも同様です。見えない線をイメージすると、美しいデザインになります。

行の間隔や文字と文字の間隔に注意する

字間や行間、余白を調整するもの重要です。行間が狭すぎると、窮屈で読みにくい印象に、一方で行間が広すぎると間延びした印象になります。文字の間隔にも考慮しましょう。普通に打った状態だと、同じフォントでも文字ごとに余白が異なり、散漫な印象になってしまいます。

また、文章のまとまりで読みやすくなるように、文字数を考えて適宜改行を入れるようにしましょう。改行後の文字数が短くなってもまとまりのない見た目になってしまうので、文章の内容に応じてバランスを整えてください。

文字をデザイン要素として利用するポイント

タイポグラフィの要素の一つ、「文字をデザイン要素として利用する」ために意識したいポイントを5つご紹介します。このポイントを意識すると、文字をデザイン要素として使うことができます。デザインに取り入れる際の参考にしてください。

数字をデザインとして活用する

数字は形もシンプルで文字数も少ないので、デザイン要素として取り入れやすいです。影をつけたり色で囲ったりと装飾をすれば、デザイン全体のイメージ作りにも一役買います。デザインは難しい…と思う方でも、数字のフォントサイズを大きくしたり配置を工夫したりするだけでも、デザインにメリハリが生まれます。

テキストの一部をデザインにし、デザインとテキストを融合させる

文字の一部をイラストやデザインにするというのもタイポグラフィでよく見る手法です。「oo」という並びがある場合に、それぞれに目玉を描いて顔を表現するようなイメージです。サービスや紹介する内容に関連したデザインを取り入れることで、より強くアピールすることができます。

このように、テキストに関連するイラストを融合させるのもポップな印象を与えてくれます。

あるいは、このように現実の物体でテキストを表現するという手法もあります。

写真などの画像のうえに文字を入れる、または、画像内にテキストを盛り込む

紹介したい内容に合わせた写真を大きく配置し、その上に文字を配置するものタイポグラフィのテクニックです。ただ、文字が読みやすくなるように工夫は必要です。例えば、グラフィックの色味とフォントカラーに大きな対比をつけたり、透過色を活用したり、文字の背景に囲みをつけたりしましょう。

写真や画像を文字型にする

写真を背景に配置するのは同じですが、その上にベタ塗りを配置して、文字を型抜きするような表現も大きな注目を集めます。文字の占める面積がある程度大きくないと何を表しているか分からないので、絞ったテキスト内容のデザインに向いています。また、一部が隠れても何を表現しているかわかるような画像を選びましょう。

文字で形を作成する

文字を並べて形を作るというのも手法の一つです。プロのアーティストが作成したデザインのようになります。上手に配置するのが難しい場合でも、曲線の一部を笑顔に見立てるなど、部分的にイラスト化すると取り入れやすいかもしれません。

おわりに

タイポグラフィを知っていると、作成したデザインの美しさが格段にアップします。気をつけるべきポイントは非常にシンプルですが、意識して調整するだけでプロが作ったような仕上がりに近づきます。

見やすくて美しいデザインであるということは、それだけ多くの人の注目を集め、良い印象を持ってもらいやすくなります。

まずは文字の配置などの基本的なことからタイポグラフィを取り入れ、デザインの一部として上手に活用してください。