タイポグラフィとは ― 文字もデザインの一部

タイポグラフィとは何か

タイポグラフィとは、文字を美しく、読みやすく配置する技術です。フォント選び、文字サイズ、行間、文字間、文字の配置。これらすべてが「タイポグラフィ」に含まれます。

デザインの約80%は文字でできています。つまり、文字の扱い方を変えるだけで、デザインの印象は大きく変わります。

なぜタイポグラフィが重要なのか

Webサイト、ポスター、SNS投稿、プレゼン資料。どんなデザインにも必ず「文字」があります。レイアウトや配色が良くても、文字の扱いが雑だと全体の印象が下がってしまいます。

タイポグラフィが与える影響

Aa フォント Aa Aa 文字サイズ 行1 行2 行間 A B C 字間 ここでは一行の文字数が 読みやすさに影響します 一行の文字数

タイポグラフィを構成する5つの要素

タイポグラフィの基本要素

フォント（書体）

文字の見た目のデザインです。ゴシック体、明朝体など。フォント選びについては次の記事で詳しく学びます。

文字サイズ

Webの本文は16pxが標準的です。見出しは本文の1.5〜2倍以上にして、コントラストをつけましょう。小さすぎる文字は読みにくく、大きすぎる文字は圧迫感を与えます。

行間（行送り）

行と行の間のスペースです。日本語では文字サイズの1.5〜1.8倍が読みやすいとされています。行間が狭すぎると窮屈で読みにくく、広すぎると文章のまとまりがなくなります。

字間（トラッキング）

文字と文字の間のスペースです。見出しは少し詰めると引き締まった印象に。本文はデフォルトのままが基本ですが、フォントによっては微調整が必要な場合もあります。

一行の文字数

一行が長すぎると、次の行の先頭を見失いやすくなります。日本語では一行25〜40文字程度が読みやすいとされています。

Bad

デザインの約80%は文字でできています。つまり文字の扱い方を変えるだけでデザインの印象は大きく変わります。フォント選び文字サイズ行間字間。

行間が狭い / 字間が詰まりすぎ / サイズ差がない

Good

文字はデザインの主役

デザインの約80%は文字でできています。つまり文字の扱い方を変えるだけで、デザインの印象は大きく変わります。

適切な行間 / 見出しと本文の差 / 余裕のある字間

初心者がやりがちな文字の失敗

• フォントを使いすぎる：1つのデザインに5種類も6種類もフォントを使うと、まとまりがなくなります。2〜3種類に抑えましょう。
• 行間が狭すぎる：特に日本語は漢字が多く画数が多いので、行間が狭いと非常に読みにくくなります。
• 見出しと本文の差が小さい：見出しが本文より少しだけ大きい程度では、視覚的ヒエラルキーが生まれません。前の章で学んだ「コントラスト」を思い出しましょう。
• 装飾フォントを本文に使う：手書き風フォントやデザインフォントは、見出しやアクセントには使えますが、長い本文に使うと読みにくくなります。

まとめ

文字はデザインの主役です。文字の扱い方を覚えるだけで、デザイン全体のクオリティが底上げされます。

タイポグラフィの全体像がつかめたところで、次はフォント（書体）の種類について詳しく学んでいきましょう。