タイポグラフィ デザイン フォント

見出し等で使いたい文字組基礎テクニック

こんにちは、来月公開する映画「ゼロ・ダーク・サーティ」を早く見たい小林です。
（映画公式サイト http://zdt.gaga.ne.jp/ ※最初に動画が流れます）

さて今回は文字組について復習したいと思います。

僕自身、この職に就くまで文字組なんて全く気にしたことがなかったのですが、今では見かけるwebサイト、ポスター、レストランのメニューなどついつい文字組を気にして見てしまいます。
きっとデザイナーの人はみんなそうなんだろうと思います。

「Web design is 95% Typography」（ウェブデザインの95％はタイポグラフィ）なんて言葉あるくらい文字組は大切とみなされていますが、文字組の要素は非常にたくさんあって書き切れないので、小出しにしながら、今回は一般的な見出しなどですぐに使えるテクニック（というかDTPとかでは常識なのかも）をさらっとご紹介したいと思います。

ベタ組みで打った場合

例えば下記のような見出しがあるとします。（フォントはゴシックMB101）

これはトラッキングやカーニングなどの文字間調整の値をゼロ＝すなわち「ベタ組み」で打った状態です。
一般的に漢字は字面に対して均一な大きさなのでそこまで気にならないのですが、ひらがなやカタカナは文字によって大きさが異なるので文字間がバラバラです！

ということで文字間が均一になるように文字詰めを行ないます。

文字間が均一になるように文字詰め

文字の間が均一に見えるように詰めました。可読性が上がったかと思います。
全体的なデザインのテイストにあわせて、その後トラッキングで全体的な文字間を調整すれば良いと思います。

広く取れば風通しが良くなりゆったりとした雰囲気に（よりわかりやすくするためウェイトも下げてます）。

かっちり詰めてウェイトをあげれば緊張がでます！

助詞を小さくしてメリハリをつける

メリハリを付ける方法として、助詞は小さくするという手法もよく使います。
「今日は晴れ」の間にある「は」が助詞になりますので小さくしました。

ブラッシュアップ

さらにここでブラッシュアップ。

  • 「」を一番細いウェイトにしました。
  • 小文字の「や」をもっと小さくし、ウェイトを一つ上げてバランスをとりました。
  • 「ー」の伸ばし棒を横幅90％にしてスリムにしました。
  • 感嘆符「！」を2～3ptほど大きくし、ベースラインを1～2pt下げました。

一番最初のベタ打ちのものと比較してみます。

いかがでしたでしょうか。文字組の調節は基本地味な作業なので、つい疎かにしてしまいがちですが、全体的なクオリティを維持する上では重要なことなので面倒臭がらずがんばりたい所ですね。

と自分に言い聞かせています。

関連記事