タイポグラフィって?

Web制作

タイポグラフィ

かつては「タイポグラフィ」という言葉は、もともと15世紀のヨーロッパで誕生した、活版印刷の技術そのものを指す言葉でした。一方で現代のタイポグラフィには、「文字の体裁を整えて読みやすくすること」文字を使ってデザインを作ることの2つの意味を持つとされています。

文字を読みやすくする

タイポグラフィと聞くと、恐らく多くの人は美しい文字などを想像するのではないでしょうか。実は、タイポグラフィには、「受け手側が違和感や引っかかりがなく読めるようにする工夫や手法」という意味合いがあります。同じ制作物でも、アーティスティックな側面だけでなく、読みやすさを考慮して作られたものとそうでないものでは、受け手側が抱く印象が異なってくるのです。例えば、フォントの種類やサイズだけでなく、文字の字間や行間、余白など実に多くのチェック項目があるのです。

すまいるさん
すまいるさん

何気なく目にするポスターや雑誌の見出しには、デザイナーの手によってミリ単位での細かな調整が施されているんだ。


文字をデザインとして取り入れる

文字をいちデザインの表現方法として使用する場合も、タイポグラフィーと呼ばれます。こちらは、読み物というよりかはイラストに近い立ち位置です。主にロゴやポスターデザインなどに用いられることが多いです。1つ目の文字のレイアウトを考えるタイポグラフィよりも文字そのものを変形させるため、さらに難易度は高くなる傾向にあります。

by Rafael Serra

奥が深いタイポグラフィ

①フォントの数

一般的にフォントの使用数は基本的に最大でも3つまでにするとよいとされています。3つ以上のフォントが使用されている場合、パッと見たときに統一感が無いことによって違和感を感じてしまいます。

②フォントの組み合わせ

フォントには相性の良い組み合わせと、悪い組み合わせが存在します。実際に並べてみると明らかなのですが、
「同類の書体」や「同じフォントファミリー」同士で組み合わせるとバランスが悪くなります。色相の場合には、似た色相を並べても相性が良いパターン(類似色相配色)がありますが、フォントの場合には注意が必要です。

③対比

重要なポイントとを目立たせるために文字サイズや太さ(ウェイト)、色の濃さなどを工夫します。タイトルや見出し、小見出しなどの重要箇所は、伝えたいメッセージが強調されるよう意識して分かりやすく対比させることがポイントです。目立たせたい部分には濃い色を使用し、画像のキャプションなどの目立たせる必要のないものへは薄い色を使用するといった具合です。

④そろえ

左揃え、中央揃え、右揃えなどにすることで統一感が生まれます。

⑤行間・字間

適切な行間は文字サイズの50%~100%前後(0.5文字~1文字分)だと言われています。また、字間を調整する作業は「カーニング」と呼ばれ、デザイナーにとって重要な作業の1つです。字間が狭いと窮屈な印象を受けしまいますが、広すぎても間延びしてしまいます。

⑥余白

プロのデザイナーが共通して行っていることは、バランスよく余白を取り入れることです。余白を取り入れることで、伝えたい情報により視線を移動させやすくなります。また、全体的なバランスが美しくなります。

Webデザインの場合

Webデザインの場合は表現できることが限られています。というのも、デジタルの技術的側面による影響を受けやすく、融通が利かない作業環境であるためです。Webデザインをする際には、Web独自のWebフォントやカラーモード、解像度など、紙媒体とは異なる部分に注意しなければなりません。

アニメーションを使って文字を動かしたり、立体的に表現できるのはWebならではのアドバンテージだよね!

すまいるさん
すまいるさん

Webフォント

SEOやレスポンシブ表示の観点から、画像でデザインしたものではなく、Webフォントとコーディングを組み合わせて表示される方法が主流になっています。このWebフォントは、紙媒体よりも使用できるフォント数が限られています。また、ユーザーの閲覧環境によっては意図したフォントが表示されない場合があるため、比較的汎用性の高いものが選ばれる傾向にあります。

カリグラフィー

カリグラフィーとは、「文字を美しく見せる手法」のことです。主に、西洋や中東で取り入れられています。また、取り扱う書体はアルファベットだけでなく、中東などのイスラム圏で使用されるアラビア文字も主流です。カリグラフィは日本の書道に似た性質を持ちますが、書道が毛筆を用いる一方、カリグラフィでは筆記にペンを使用する点が大きな違いとなります。さらに、時代とともに様々なフォントが開発される中でこういった「筆記による」美しい文字が手本とされており、直接ペンで描写するもの以外にも応用されています。

レタリング

レタリングとは、フォント自体をデザインすることです。もともとは手で「文字を書く」という意味でしたが、そこから派生して現代では文字を美しく見せるためにデザインをすることを指すようになりました。一部、タイポグラフィと似た性質を持ちますが、タイポグラフィが「文字をデザインとして取り入れる」のに対し、レタリングは「文字自体を創作する」違いがあります。フォントデザイナーが行う創作はレタリングに当たります。有名なフォントにはマックス・ミーディンガーによる「Helvetica」、パウル・レナーによる「Futura」、スタンリー・モリスン、ヴィクター・ラーデントらによる「Times New Roman」などがあります。

SMILE MISSION Inc.

SMILE MISSION Inc.

Web制作、グラフィック制作をはじめとする群馬県前橋市のデザイン会社、「株式会社スマイルミッション」の公式ブログページです。 Web制作やグラフィック制作に関するコンテンツをお届けします。

関連記事

特集記事

TOP