伝わるサイトは文字のデザインに理由あり。タイポグラフィの基本

デザインに携わったりクリエイティブなことをする際に、見たり聞いたりする「タイポグラフィ」という言葉。なんとなくはわかるけれど、いまいちピンとこない方も多いのでは？最近はタイポグラフィに関する書籍も数多く出版され、言葉としてもデザインとしても、より多くの方が興味を持ってきているように感じます。印刷はもちろん、Web制作にも大きな要素となっているタイポグラフィについて、これから何回かに分けて一緒にみていきましょう。

そもそも、タイポグラフィとは？

タイポグラフィについては、定義が明確なわけではなく曖昧な部分もあります。国の違いもありますし、文字の使われ方が時代と共に変化していくうちに、意味合いもなんとなく変わってきてるのだと思うのです。（私は文字の専門家ではありませんので、その辺りは専門家の方にお任せするとして）

デザインにおいてのここ最近の使われ方としては、２通りの意味合いを持つと考えています。

• 1.文字を情報として読みやすく伝えやすく、美しく並べること
• 2.文字をイメージ要素として、デザインに取り入れて使うこと

日本語の意味を探ると、タイポ（type)は、タイプや種類、形や字体、等です。グラフィ(graphy）は主にグラフィック。ドローイングやイメージ、アートやヴィジュアルなど写実的な意味合いを持ちます。そうやって日本語で考えてみると、少しわかりやすいですよね。

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

文字の役割は、今この記事を読んでいただいている通り、書いてある情報を読む人に伝えることです。読みやすい字で、読みやすいレイアウトで並べると内容が頭に入っていきやすい。そのためにタイポグラフィが重要です。わたしたちは日本語フォントと欧文フォントを使うので、縦書き、横書きの違いもありますし、より読みやすくすることが必要ですよね。何気なく目にする、雑誌や本などの印刷物はここに大変こだわっています。そのおかげで、スムーズにみなさんの頭に文字情報が届いているのです。

どの文字の形を選ぶのかということも重要です。ここで言う文字の形は「フォント」と置き換えると耳なじみがいいかもしれません。伝えたい情報や世界感を伝えるにはどのフォントの組み合わせが適しているのか。文字の並べ方、スペースや大きさなど組版の調整。これで見た目の美しさが加わります。

例えば活版印刷

活版印刷という技法があります。鋳造活字を並べて印刷物の版を作るのですが、その際に文字を組んでいく（文字組み）があります。並べ方や余白など考えながら、美しく文字を組んでいく。手間をかけながら作っていって、私たちが目にする印刷物ができあがるのです。
今はデジタルで作ってすぐにプリントできる時代ですが、この活版印刷は印刷物としてとても美しくいい味を持っているので、オリジナルのアイデンティティを出せるとして注目されています。

文字をイメージ要素として、デザインに取り入れて使うこと

タイポグラフィは、デザインとして文字を形として使用しながら、そのまま文字の意味を情報として扱うことができます。写真やイラストと組み合わせて使うことが多いですが、タイポグラフィだけをデザインのメインに使うこともあります。

こうしたタイポグラフィ中心のデザインは、画像や写真に依存することがないので、前回ポストした記事で紹介した色やグラデーションの組み合わせとして使いやすいですし、シンプル・ミニマルなデザインでも好まれます。
▽参考記事：用途は様々、Webのグラデーションデザインまとめ

簡単に言えば、文字を形としてとらえる

わたしたちは、文字は情報を伝える手段として日常的に使っていますが、このように形（イメージ）としてとらえてみると、色々なことが見えてきます。道路にある行く先を伝える標識、街中の看板、駅や空港にある文字、ブランドのロゴ、広告など、それぞれがタイポグラフィとして、何か意味を持ち伝えています。


フォントも、日本語フォント、欧文フォント、手書きフォント、最近ではWebフォントなど種類があり、それぞれに歴史や成り立ちがあります。フォントデザイナーが苦労して作ったフォントが世界的に使用されて、WindowsやMacのPCに標準で入っていたり、調べてみるととても面白い世界です。ご自身の作ったフォントが、旅をした国のお店で使われているのを見たという話を読んだ時は、とてもドラマティックで素敵な仕事だなと思ったものです。

タイポグラフィにおけるWebと印刷物の違い

タイポグラフィは、印刷物はもちろんWebでも大きな要素です。わたしはWebも印刷物も作りますが、印刷物のほうが出来上がりがFixされるので、最終的に扱いやすい部分はあります。が、印刷されてしまうとやり直しがしにくいデメリットもあります。
Webでは、画像のタイポグラフィは比較的やりやすいですが、ブラウザ間での見え方の調整が必要。テキストとして扱うタイポグラフィは、思わぬ場所で改行されるので気をつかいます。

見出しは以前、画像で目立たせるように作っていましたが、Webフォントが使えるようになった昨今はSEO等のメリットからも文字を画像としてあまり使わなくなりました。
印刷物と違いWebではやり直しはしやすいですが、気をつけるところが多いです。でも、そのバランスがデザインがよくなる大きなポイントかもしれません。

BiNDで使える日本語フォントは全541書体。筑紫ファミリーや丸明シリーズなど人気フォントも。Webフォントとしても画像にも扱える
Webフォントを見出しや本文などで文字情報として見せる方法と、画像の上に載せる文字を形として見せる方法を組み合わせて、どうしたら情報が伝わりやすくなるか、意識してみるのもよいでしょう。

タイポグラフィの書籍

最後に、個人的に面白かったり、ためになったりしたタイポグラフィ関連の書籍をご紹介します。

「タイポグラフィ13 タイポグラフィ事典」
事典というだけあって、書体について網羅されている。見ているだけで面白いのですが、特に和文書体と欧文書体の歴史表が掲載されていて、興味深かった。

「フォントのふしぎ ブランドのロゴはなぜ高そうに見えるのか？」
欧文フォントの専門家である小林章さんの目から見た、フォントの解説。旅をしながらのフォント説明など、ワクワクすることばかりでわたしにはとても気になるお方。（文中に記載の海外で自分のフォントに出会うお話はこちらから）それだけでなく、ブランドのロゴはなぜ高そうに見えるのかなど、専門家目線の解説がためになる。
※画像はAmazonより

次回は

タイポグラフィは、もっと奥が深く歴史も深いです。
日常に溶け込んでいてなかなか気がつかない部分もありますが、実はとても生活に密接です。フォントの表現で日本語の美しさに気がつくこともあります。普段より少しだけ、注意して周りを見てください。タイポグラフィを発見する楽しさに気がついてもらえると嬉しいです。そしてそれらをサイトデザインに取り入れてみませんか？

次回からは、Webで使うタイポグラフィについて、実践を交えて紹介していきたいと思います。Webサイトやバナーのデザイン、SNSで使えるタイポグラフィデザインなどを考えていきましょう。
少しでも、みなさんのデザインのアイデアが広がりますように。

画像の上に文字を載せる5つのテクニック～Webデザインのタイポグラフィ２

フォントが豊富なBiNDupを無料で試す