デザイナーに次に知ってほしい文字組み初級

BLOG / 2018.09.18

2014年に「デザイナーにまず知ってほしい文字組み入門」という初心者向けエントリーをあげて以来、早数年が経ちました。
その月日の中で「絶対フォント感」という言葉が流行したり、「フォント」あるいは「文字組み」という単語が(より一層)脚光を浴び、メディアコンテンツとして取り上げられることが多くなったなと感じます。
例えば2017年にはTBSさんの「マツコの知らない世界」でも取り上げられ、マニアには垂涎の的の「フォントかるた」という大人気商品も生まれたりしています。

さらに、文字組みに関する記事も爆発的に増えていると感じますが、手法が先行した記事が多いことに少し私は疑問を持っています
特に「なぜ文字をツメることが“大”前提」なのでしょうか?

この記事は、上記の“なぜ”の部分を少し意識してもらい、Adobe Illustratorをメインで使用するデザイナーが、他の文字組みの手法に関する記事を読むための“事前知識”を得ることを目的とした記事です。

文字組みが「美しい」「かっこいい」「ワンランク上」とは?

文字組みに関する記事は概ね、「美しい」であったり「かっこいい」「プロがやっている」といったイメージ重視の形容詞が使用されています。
これらの形容詞は多様な意味合いを含んでいますが、まずは「文字は読まれてこそ意味がある」ということを前提とし、「読みやすい」=「読者の読むリズムを邪魔しない」文字組みこそ「美しく、かっこいい文字組み」と評されるべきではないかと私は考えます。

そんななか、「美しく文字を組む手法」として紹介される“うわさ”は大きく分けて2つあるようです。

うわさ1は記号は適度にツメる。うわさ2はひらがな、カタカナは原則ツメる。

この2つのうわさ「ツメる理由」ですが、ざっくりと見ていると概ね下記のような理由のようです。

  • ひらがなやカタカナは漢字と比べると余白が大きい
  • 文字の持つ余白サイズによってバラバラに間隔があいて間延びして見える
  • 記号の後ろの余白は微妙な空間
  • だってとにかくプロがやってる

ここで漸くこの記事の1つ目の本題です。
この余白、“なぜ”存在するのでしょうか?

文字の余白の存在意義

まず、本文はツメ組みではなく「ベタ組み」を基本とします。
文字の長い歴史であったりはより詳しい記事が他にありますので割愛するとして、私の中で「なぜベタ組みが基本なのか」ということに対して一番の理由となりえるのはフォントの作者さんが作成時にまずはベタ組みで作成しているということ。
割愛してしまったのでそもそもの理由はここでは触れませんが、今なお余白ありきで作成されているので「よく分からないけれどプロがやってるからツメて……本当にいいのか?」と少し考えてみてください。
下記はフォントワークス株式会社の藤田さんが、筑紫Q明朝S-Lの組版テストをされている時に掲載されていた見本ツイートです。

ここからは個人的な考えも踏まえつつですが、上記のうわさの影響なのか、街なかで見かけるリーフレットなどの本文中の句読点や記号をツメてしまっているものをよく見かけます。
本文をツメると、文章が長ければ長いほど読者側の“読むリズム”としては少し息がつまる……と感じています。
小学生のころ、国語の音読の際に「読点は一拍(一呼吸)、句点は二拍(二呼吸)」とアドバイスを受けた記憶があり、デザイナーとなった今あらため言語化するならば、句読点で呼吸を止め、アキ量部分の「余白」で息継ぎをを行い、読むリズムを取っているのでは?と考えました。

極稀にですが、WebサイトでもCSSやjQueryを利用して本文をツメてしまっているものを見かけますが、まずはツメるという選択をする前に「なぜ余白が存在するのか?この余白はこの場所に必要では無いだろうか?」と疑問を持ち、ご自身が納得した上で必要があれば適宜ツメる(もしくはアケる)という方法を取るべきではないでしょうか。

ツメ組みを行う方法と場所について

続いて手法についてですが、記事の多くは「文字をツメる = カーニング」の手法として「Alt + 矢印キーの連打」を最初に紹介されていることを多く見かけます。

ですがこの方法ではかなりデザイナーの感性に委ねられる部分が多く、非常に時間と手間がかかります。
ロゴタイプなどに関しては後述するとして、見出しなどにはまずは「プロポーショナルメトリクス + カーニング」という設定を知ることから初めてみてはいかがでしょうか?
ざっくりとした説明をするならば、「プロの書体作成者(フォントの作者)が予め作ってくれている自動カーニング設定」です。
本来、OpenTypeフォントには既に書体作成者の手によって「個々の文字に合わせて幅を調整する情報(プロポーショナルメトリクス)」が付加されており、さらに文字の並びによってカーニングを自動で行ってくれる機能があります。
※フリーフォントにはない場合もあります。

Illustratorの文字パネルの「文字間のカーニングの設定」を「自動」にし、OpenTypeパネルの「プロポーショナルメトリクス」にチェックを入れることで設定が可能です。

例えば、文章量が多い印刷物や読み物など「見出しが“複数ある”」場合、一箇所ごとにデザイナーの感覚でカーニングを行うと、後々修正が入った際に大変ですし、何より個々の見出しのリズム感に違いが出てしまい、読者が読むリズムを崩してしまいがちです。
こういった場合は「Alt + 矢印キーの連打」をするよりも、「プロポーショナルメトリクス + カーニング」を使用する程度にとどめ、文字間の法則を守る方が読者にとって読みやすい文字組みではないでしょうか。

一方で、ロゴタイプであったりタイトルやブログ画像内の文字など、読んでもらうことよりも「目を引くことを主目的とした文字」の場合は、「プロポーショナルメトリクス + カーニング」の利用だけに留まらず、デザイナーの感覚で詰めたり、逆にアケたりすることで、より意図した結果を生み出しやすい文字組みになると考えます。
助詞や単位を一回り小さくしたりなどする手法もよく紹介されていますが、こういった手法は文字組みというよりはデザイン処理に近い「注目させる処理 = 魅せる文字」に分類されると考えます。

以上のことから、冒頭の「読みやすい」=「読者の読むリズムを邪魔しない」ベタ組みを本文では基本とし、見出しなど複数回繰り返される部分にはツメ組みを適宜取り入れつつ、目を引くことを主目的とした見出しやタイトル、ロゴタイプなどにはデザイナーがツメ組み、アケ組み、デザイン処理などを必要である、と判断した場合に施す事「美しく、かっこいい文字組み」と言えるのではないか、と私は考えています。

文字組みについて知るなら、こちらの記事もいかがですか?

上記を更に踏み込むために、私があなたに読んでみてほしいな、検索結果の上位に表示されてほしいなと感じている記事をこちらでご紹介します。
デザイン処理的な意味の文字組み(?)の方法は自由だと思うので、他の記事を参考にされてください。

あとがき

ところで、私はデザイナーです。
特別「三度の飯より書体が好き」という種族には属しておらず、ただ手法が先行した記事が多くあることに「もはや邪魔者扱いしているけれど、存在理由を考えたことはあるのだろうか?」と疑問を持っていました。
余白には余白の意味があり、文字が生まれた長い歴史の中で取り除かれずに今なお存在する意義について、一度振り返ってみてはいかがでしょうか。

どのデザイナーさんも「なぜこのデザインにしたのか」という自分への問いかけは絶えず行っていると思います。
文字組みに関しても、「“なぜ”ツメるのか?」と少し考えてもらえるきっかけにこの記事がなれば幸いです。