文字で人を惹きつける！タイポグラフィで押さえるべきポイント15選

この記事は2016年12月1日に更新しました。

デザインにおいて、重要な要素の一つが「文字」です。

コンテンツに文章を使う場合、中身が同じでもタイポグラフィ次第でユーザーに与える印象、見え方、読みやすさは大きく違ってきます。
どのような書体を選ぶか、どう配置するかといった基本のルールを知り、理解しておくことが重要です。

逆に言えば、ある程度の基本さえ身につけておけば、誰でも一定レベルのデザインをすることが可能となります。
同じ文字でも見せ方次第で格段にクオリティの高いデザインにもなりますし、視認性の高さ・伝達できる情報量も違ってきますので非デザイナーでも知っておいて損はしません。

今回は、タイポグラフィで気をつけるべきポイントをご紹介します。
デザインで文字を多く扱う方以外でも、普段デザインをおこなう方なら知っておくべき内容ですので、ぜひ参考にしてみましょう。

タイプグラフィとは？

タイポグラフィとは、元々は活版を用いた印刷術のことです。現在では、デザインにおける活字（テキスト）の構成および表現を意味します。具体的には、フォントの種類、サイズ、文字組や行間等を特定のルールに則って上手く組み合わせることで、文章の読みやすさや美しさを意識したデザインを作る手法です。

タイポグラフィを用いることで、イラストが苦手な人やデザイナーでない人でも、相手に伝えることの出来る情報量と濃度を高めることが可能になります。

タイポグラフィの成り立ち

タイポグラフィはもともと活版による印刷術の1つとして、経済的な効率性を重視した印刷物の出版を実施するために誕生しました。活字の配置や構成、フォントやサイズ、行間（レディング）、文字と文字との間隔（カーニング及びスペーシング）、印刷紙面上での活字が占める領域の配置・構成（レイアウト）などを設定することで、印刷物の読みやすさや美しさを得ることができました。

現在では、印刷物だけでなく、様々なデザインに用いられるようになり、デザインの基本の1つとなっています。

タイポグラフィでの注意点

1.イメージに合うフォントを選ぶ

http://www.ar-ch.org/mt/archives/2012/04/post-6.html
ユーザーに抱いてほしいイメージ次第で、選ぶべきフォントは異なります。
それぞれのフォントが持つ印象の傾向を知ることが重要です。

選ぶ手順として、まずは日本で使用する和文フォント・欧文フォントを細かく分類した8カテゴリの中から、フォントの系統を選びます。
そして、系統内のフォントからさらに絞り込んでイメージに合うものを選ぶことで、ユーザーに伝えたいイメージを的確に伝達することが可能です。

フォントの「とめ」、「はらい」のような要素を持つものは格調高さ・堅実な印象を持ち、これとは逆に丸みのあるフォントは親しみやすい印象があります。

2.フォントを使いすぎないこと

https://www.internetacademy.jp/it/typography-rules-web-design.html
フォントをいくつも使いすぎると乱雑な印象になってしまいますので注意が必要です。
まとまりのいいデザインに見せるためにもフォントの種類、サイズは3種類程度に抑えておくのがベターです。
また、フォントファミリーを活用し種類を増やさないようにすればすっきりとした印象を与えることができます。

3.似たようなフォントを合わる際には注意

http://blog.btrax.com/jp/2014/07/01/type1/
例えば、HelveticaとArialのように、雰囲気は似ているものの、わずかにデザインが異なるフォントを組み合わせると、デザインのメリハリを損なってしまいます。
また、なんとなく偽物っぽい印象を与えてしまうのもこの組み合わせです。
デザインのメリハリがない、と感じた時には大幅に異なるスタイルのフォントを合わせるというのも一つの手です。

4.読みやすいフォントを選択する

http://blog.btrax.com/jp/2014/07/01/type1/
フォントはデザイン、印象だけでなく、可読性も非常に重要です。
アクセントとして見出し、タイトルといった一部に個性的なフォントを使うという手もありますが、本文にまで使ってしまうと読みづらい文章になってしまいます。

フォントを選ぶ際には、デザイン性の高いもののほうが見た目が良くなると思ってしまいがちですが、可読性を考えると注意が必要です。
デザイン性の高いもの、装飾があるものは本文には使用しないことをオススメします。
特に、大きく変形したもの・手書き風・飾りつきのものを使う場合には、読みづらくなっていないかを確認する必要があります。

5.適切なフォントのサイズに気をつける

https://www.internetacademy.jp/it/typography-rules-web-design.html
フォントサイズに意図的に強弱・リズム感をつけることで、文章に優先順位をつけることができ、分かりやすいコンテンツになります。
逆に、コンテンツ全体で全く同じフォントを使ってしまうと、ユーザーはどこを読めばいいか迷ってしまう可能性があり注意が必要です。

6.フォントの位置・大きさを揃える

https://www.ficc.jp/blog/web_typography/
全く同じフォントであっても、文字によって位置・大きさが異なります。
打ったままの文字では揃っていませんので、均一に見えるよう調整が必要です。

通常フォントは、漢字が平仮名・片仮名よりも大きめ、アルファベットが平仮名・片仮名よりも小さめです。
この時、文字だけでなく「！」のような記号もきちんと揃えていきます。

7.文字バランスを考える

http://blog.btrax.com/jp/2014/07/01/type1/
特に見出し、本文では文字サイズのバランスを考える必要があります。
先の「階層構造」でもあったように、役割に応じたフォントサイズ・スタイルを選ぶとうまくバランスをとることが可能です。

8.行の間隔に注意する

https://www.ficc.jp/blog/web_typography/
文章が何行にもなる場合、読みづらくならないように行の間隔に注意が必要です。
一般的に150〜190％が読みやすい行間と言われており、これを目安に間隔を取れば見やすいコンテンツとなります。
もちろん、内容次第で基準が若干異なりますので、コンテンツ毎に最適な間隔を考えることが大事です。

9.文字と文字の間隔に注意する

[http://kandeza.com/catchcopy/newyear-kerning/]
行の間隔に加えて、文字の間隔も考慮すべきポイントです。
そのまま文字を打った状態を「ベタ組み」といいますが、この場合同じフォントであっても文字によって余白の面積が異なり、散漫な印象を与えます。
よりコンテンツのクオリティを高める為にも、文字間の調節が重要です。

10.適度に強調する

http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html
文章を読む時、ユーザーは次から次に流し読みする傾向があります。
強調したいキーワードに少しだけアクセントを入れると、効果的に読んでもらうことが可能です。

11.ベースラインを水平に保つ

[http://www.hp-stylelink.com/news/2013/10/20131004.php]
文字を打ってそのままの状態だと、ベースラインが整っておらず、見栄えがあまりよくありません。
そこで、手を加えると一気に見た目の美しさがアップします。

12.読みやすいように文字を左寄せする

http://blogdesigners.blog117.fc2.com/blog-entry-2.html
文字は左寄せにするのが一般的です。
全ての列の文頭を左に寄せることで、読みやすいコンテンツになります。
これにより右側はバラバラになってしまいますが、読みやすさを損なうことはありません。

13.最適な文字数を考える

http://www.okidata.co.jp/special/tips1/tips10a.html
一行の文字数を最適にすると、コンテンツが読みやすくなります。
文字数を考えなかった場合に、あまりに文字数が少ないと視線を動かす回数が増え疲れてしまいますし、多すぎると行頭がわかりづらくなってしまいます。

目安として、縦組みでは20～45文字、横組では15～35文字程度がスラスラと読み進めることが出来る文字量です。

14.「•」や「””」をうまく使う

http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html
文章内でよく見かける、「””（ダブルクォート）」や「•（ビュレット）」といった約物も考慮すべき点です。
このような細かな部分は案外忘れがちなので、しっかりと適切に配置する必要があります。

15.本文に大文字を使わない

http://coliss.com/articles/build-websites/operation/design/simple-rules-for-good-typography.html
英文を書く時には、本文に大文字を使ってしまうと読みづらくなりますので気をつける必要があります。