タイポグラフィとは？
ポスターや広告を美しく見せるには、配色やイラストなど、グラフィックへのこだわりも重要ですが、タイポグラフィについても意識する必要があります。
まずは、タイポグラフィがどんなものなのか、概要について解説します。
文章をきれいに見せるデザインの手法
タイポグラフィは『文章を読みやすく、きれいに見せるデザイン手法』です。文字の大きさやフォント、文字の配置や配列にこだわり、全体の印象をブラッシュアップしていきます。
タイポグラフィにはセオリーがあり、そのセオリーに沿ってデザインすることが重要です。イラスト技術やデザインの知識がない人でも情報量を増やし、洗練されたデザインに仕上げることが可能になります。
もともとは活版印刷術
タイポグラフィは、活版印刷と共に歴史が始まったといわれています。その歴史は、15世紀にまでさかのぼり、聖書を当時の様式に従って大量に作るために用いられたのが始まりです。
16世紀に日本へと伝わりましたが、本格的に導入されるのは明治になってからでした。20世紀後半に写真植字の技術が普及するまで、活版印刷はずっと日本の印刷手法の主流でした。
その長い歴史の中で、どうしたら文章を綺麗に見せることができるか、文字やレイアウトについて築かれていったノウハウが『タイポグラフィ』です。
現在では、活版印刷は主流ではなくなってしまいましたが、タイポグラフィの技術はデザインの手法として残っています。
フォントに関するルール
タイポグラフィを活用していく上でのルールについて紹介します。まずは、フォントに関するルールから注目していきましょう。
フォントを使いすぎない
現在、フォントの数は数千にものぼると言われています。読みやすい明朝体やゴシック体、癖のある行書体など、日本語に限ってもさまざまな様式があってどれも魅力的です。
だからといって、多数のフォントを詰め込みすぎるのは好ましくありません。全体を通しての見栄えが悪くなってしまいます。類似フォントを多用するのもメリハリがなくなってしまいます。
まずはフォントを分類するカテゴリーの中から系統を選び、その中でさらにイメージに合ったフォントを選ぶことが重要です。
読みやすいフォントを使う
タイトルや見出しに、独特のフォントを持ってきて注目を集めるという手法はあります。しかし、本文にまで独特のフォントを利用しては、ただただ読みにくい文章になってしまうでしょう。
本文に使うフォントは、デザイン性よりも『読みやすさ』を優先する必要があります。日本語のフォントであれば、明朝体やゴシック体といったフォントが読みやすいため、それをベースにしていくと、綺麗に文章がまとまるでしょう。
サイズや色に緩急をつける
ユーザーは、同じような文字が続くと流し読みしてしまう傾向にあります。注目してもらいたい内容やワードについては文字のサイズや色を変えて、文章に緩急をつけていきましょう。
ただし、あまりに多くの色をつけすぎたり、頻繁に文字のサイズを変えたりすると読みにくくなってしまうだけなので、要所要所で変えていくことが望ましいでしょう。
また、文字色と背景色は同系統にすると綺麗にまとまるという法則があります。彩度や明度に関しては被りすぎると読みやすさを損なってしまうので、しっかりと区別していきましょう。
余白に関するルール
余白もデザインの上では大切な要素です。余白を上手く使えば、ビジュアル全体を綺麗に見せることも可能です。
行のスペースを意識する
文章が何行にも続く場合は、詰め込みすぎないように行間隔を一定以上取る必要があります。行間が狭すぎると視線の混乱を招きやすく、知らない間に次の行に視線が移ってしまっていることがあるなど、非常に読みにくくなってしまうからです。
適切な行間は『150～190%』だといわれています。この数値を基準に行間を詰めすぎないように意識しましょう。
行間は内容次第でも異なります。子どもが読む絵本であれば大きくとっても構いませんし、小説や新聞のような文書では、あまり大きく取り過ぎると内容が不足しているように感じられるでしょう。
文字と文字の感覚にも注意
行間と同様に文字と文字の間隔にも気を付けましょう。文字をそのまま打つ『ベタ組み』をすると、文字によって余白が異なるのでデザインが崩れているように見えることがあります。整然と見えるように文字間の調節を行っていきましょう。
この時、字間を広げるとややゆったりとした印象を持たせることもできますが、長文の場合はかえって読みにくいものになってしまいます。文章量に合わせて字間を調節することも必要です。
文字の周りに余白を用意する
文字周りに、十分な余白を用意しましょう。ページの端まで文を読んだときに、余白が少なすぎると、次にどこに飛んだらよいのかが分からずに止まってしまうことがあります。
読みやすさやデザイン性の面を考慮しても、余白には余裕を持たせることが望ましいです。少なくとも、行間とは区別できるほどに明確なスペースを設ける必要があります。
情報量が多い場合でも、余白をしっかりと意識したレイアウトを心がけることによって、しっかりと読んでもらうことができるでしょう。
文章に関するルール
続いては文章に関するルールを紹介します。文章の配置やレイアウトには次のようなポイントがありますので覚えておきましょう。
文章は左寄せにする
『文章は左に寄せる』のが鉄則です。日本語の横読みも、英語も左から読むという共通のルールがあります。右端がバラバラであっても問題はありません。読み始めである左端に文頭を持って来るようにしましょう。
短い文章などを意図的に演出して見せる場合は、中央に寄せることもありますが、特に長文の場合は基本的に左寄せを意識してデザインするのがおすすめです。
視点移動を意識する
『視点の移動』を意識したデザインを心がけましょう。1行あたりの文字数があまりに少ないと、視線を動かす回数が増えて疲れてしまいます。行間を広げすぎるのも、視線を上下に大きく動かす必要がでてくるのでおすすめできません。
どこが文頭になるのかを分かりやすくすることも重要です。そのためには数字を有効活用しましょう。見出しの頭にナンバリングを振ることで、読む順番がだいぶ分かりやすくなります。
数字におしゃれな装飾を施せば、記事全体の雰囲気を彩ることも可能です。
本文に太文字は使わない
本文に『強調装飾や太文字は使わない』ようにしましょう。文字間や行間が狭まってレイアウトが崩れている印象を持たせてしまう怖れがあります。
また、画面によっては文字が潰れてしまい、読めなくなる原因にもなるので扱いには注意が必要です。
特に、英文を書くときには大文字や太文字は読みにくい原因となるので、使うにしてもデザインを損なわないようにしましょう。
タイポグラフィのギャラリーサイト
タイポグラフィを意識する際にとても参考になるタイプグラフィーがまとめられているギャラリーサイトがあります。フォントデザインが好きな人は、閲覧しているだけで楽しめるでしょう。
使われているフォントがわかるFonts In Use
『Fonts In Use』は、デザインに使われているフォントについて記載があります。お洒落なフォントを見つけたら、同じサイトの中でそのフォントが使われている別のギャラリーを見つけるといったことも可能です。
トピックスやフォーマットなど、カテゴリー別にギャラリーがまとめられているのもポイントでしょう。
ギャラリーにカーソルを合わせることで、どんなことが書かれているのかが表示されます。スタイリッシュな英字が多く、見ているだけでも満足できるサイトです。
Fonts In Use – Type at work in the real world.
有益な情報がまとめられたTypewolf
『Typewolf』はタイポグラフィの有名なブログで、タイポグラフィについて興味がある人の中では知っている人もいるのではないでしょうか？
使用されているフォントの種類や、フォントをダウンロードできるリンクなどの記述もある他、フォントに関するさまざまな情報がまとめられた情報ブログです。
『Typewolf』が発表した『Googleフォントベスト40』では、Googleフォントの中でも優れたフォントとして40種類が紹介されています。Googleフォントは無料で商用利用も可能なので、気に入ったフォントがあれば使ってみるとよいでしょう。
What’s Trending in Type・Typewolf
日本語Webフォントを使用している60のWebサイト
ここまではすべて英語のページでしたが、『株式会社シロクロ』が発表している『日本語Webフォントを使用している60のWebサイト』で紹介されているのは、日本語のWebフォントです。
ゴシック体・丸ゴシック体・明朝体・その他の四つの系統ごとにフォントの種類と、実際にフォントを使っているWebページを紹介しています。
株式会社シロクロは、WebサイトやUIデザインを業務とする会社で、ブログにはWebデザインについて主に描かれています。
文字についての記事もあるので、勉強がてら興味のある人は読んでみるとよいでしょう。タイポグラフィを考える上でもとても参考になります。
日本語Webフォントを使用している60のWebサイト | 株式会社シロクロ
制作に役立つ便利なWebサイト
タイポグラフィを意識して広告やWebデザイン制作を行う上でとても役立つサイトを紹介します。商用利用もできるフォントフリーのサイトもあるので、実際に利用してみるとよいでしょう。
フリー素材が集まったフォントフリー
フォントフリーは日本語のフォントがたくさん集まったサイトで、非常に読みやすくデザインされています。
ゴシックや明朝といったフォントの系統による検索だけでなく、『手書き風』『毛筆』『かわいい』『ユニーク』など、フォントの特徴ごとに検索できるのが便利な点です。フォント名から検索することもできます。
WindowsとMacのそれぞれのOSごとにフォントをダウンロードできる上に、フォントについても商業利用の可否や、ひらがなやカタカナ、漢字のどこまで対応しているのかも簡単に確認できます。
日本語のフォントがまとめられているサイトは珍しいので、チェックしておくとよいでしょう。
フォントの組み合わせを確認できるFontjoy
このサイトには、上部に三つのボタンと一つのバーがあります。
1番左のボタンは、フォントを検索するためのボタンです。サーチ機能もできますし、『A』のフォントが羅列されているので気になったフォントを選ぶこともできます。フォントを選ぶと、表示されている文章がそのフォントを中心としたものに切り替わるという仕組みです。
左から2番目のボタンは、背景と文字の白黒を反転させます。そしてその隣にあるボタンは、ランダムにフォントを選ぶボタンで、ボタンを押すと何度でも更新可能です。
最後のバーは、フォントの組み合わせを確認するものです。ページには四つの文章が異なったフォントで表示されていますが、バーをスライドすることでフォントの系統を近づけたり、遠ざけたりすることができます。
フォント同士を組み合わせた場合に、どんな風に見せるかをここで確かめてみましょう。
Fontjoy - Generate font pairings in one click
オンラインエディターTypecast
『Typecast』は、タイポグラフィを意識して文書作成ができるオンラインエディターです。
サイトに用意されているたくさんの種類のフォントを利用しながら文章が作れるので、フォントの選択などをはじめとしたタイポグラフィがとても行いやすいのが特徴になります。
エディタ上で調整したタイポグラフィはCSSに書き出すことが可能です。そのため、ブログやWebサイトに、デザインをそのまま反映することができます。
利用にはログインが必要なので、まずは会員登録（無料）から行いましょう。
Design with web fonts in the browser - Typecast
タイポグラフィが学べるおすすめの本
タイポグラフィにはさまざまな知識やノウハウがあり、先人から学ぶのが一般的な教習法です。Webから学ぶだけでなく、詳しく記載された本からも知識を取り入れていきましょう。
タイポグラフィの基本ルール プロに学ぶ、一生枯れない永久不滅テクニック
『タイポグラフィの基本ルール プロに学ぶ、一生枯れない永久不滅テクニック』は、タイポグラフィについて最初から学ぶ初心者におすすめの本です。
フォントや文字の配置、文章の余白など、すべての基礎的なノウハウが詰まっています。
初心者にはとてもわかりやすく丁寧に書いてある分、上級者でも基礎を振り返るために持っていても良い1冊です。日本語・英語のどちらのタイポグラフィについても取り上げられていて、広範囲にわたって学ぶことができます。
タイポグラフィについて、これから学び始めようと思う人は、この本から始めてみるとよいでしょう。
- 書籍名：タイポグラフィの基本ルール プロに学ぶ、一生枯れない永久不滅テクニック
- 価格：4630円（税込）
- Amazon：商品ページ
タイポグラフィ・ハンドブック
『タイポグラフィ・ハンドブック』は、タイポグラフィのテクニックについてとても細かく書かれている本です。
文字の構造や書体の種類、レイアウトのフォーマットや欧文書体のリストなどといった、タイポグラフィのための情報が濃縮されています。
この本の大きな特徴は、通常の初心者本や教本とは違い、どこからでも読めるという点です。ハンドブックの名前にふさわしく、分からないことがあれば、目次から検索することで詳しく書かれているページを確認できます。
小さくて持ち運びもしやすく、基礎を学びたい人から上級者のハンドブックとしてもおすすめできる一冊です。一つのテーマについて完結に書かれているため、短い時間を利用して読み進めていくことできます。
- 書籍名：タイポグラフィ・ハンドブック
- 価格：4104円（税込）
- Amazon：商品ページ
フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？
『フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？』は、そのタイトル通り「高級ブランドのロゴはなぜ高級そうに見えるのか」「Aという文字の右側の線が太いのはなぜか」といったフォントについて気になる疑問に対して回答が記載されています。
なぜ、この場面ではそのフォントがふさわしいのか、どうしてそのような配置にしているのかといった理論や背景について、タイポグラフィの基礎とともに掲載されています。
実際に使われているロゴを例にとって解説してくれているので非常に分かりやすい1冊です。すべてアルファベットに対する解説なので、日本語のフォントのみを学びたいという人は注意が必要です。
- 書籍名：フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？
- 価格：2160円（税込）
- Amazon：商品ページ
まとめ
タイポグラフィは、広告やWebサイトなど、さまざまな媒体において文字のフォント・大きさ・色・配列を決める上での重要なデザイン技術です。
タイポグラフィを意識することで、視線誘導を自然に行ったり、読みやすい文章を意識して生み出したりすることができます。
タイポグラフィには確立されているいくつもの法則があり、それを知るためにはタイポグラフィについてまとめられたWebサイトや本から学ぶ必要があります。おすすめの書籍やサイトを紹介しているので、参考にして知識を深めていきましょう。
