0

その隙間を見逃すな!文字組を怠るべからず。

その隙間を見逃すな!文字組を怠るべからず。

デザインをするにあたり、必ず意識する必要があるのが「文字組(もじぐみ)」です。ビジュアル的なデザイン性、マッチするフォント選びなども重要な項目ではありますが、その基礎として文字組がきちんと出来ているということがあります。

PhotoshopやIllustratorなどで文字を入力した際に、「、」の後ろや「W」の後ろなどに余計なスペースが生まれてしまうことはありませんか?気付いていながらそのまま何も対処していない・・・。なんてことのないようにしましょう。ほんのわずかな隙間やスペース、悪く言えば「ズレ」を放置して良いわけはありません。
バナーの見出し、POPのタイトル、本文、ロゴなど様々なところで頻繁に必要な作業ですので忘れずに行いましょう。

このような、文字と文字の間を詰めて読みやすくすることを「文字組」と言います。それと反対に、文字組をしないでテキスト入力したままの状態を「ベタ組み」と言います。

では文字組とは何か?
それは「カーニング」「トラッキング」「字送り」などの「文字詰め」のことを言います。

何で文字組をする必要があるのか?

和文(日本語)の文字は、一般的に正方形の中に収まるように調整がされていて、 その「正方形(仮想ボディ)」を横や縦に並べた見えない枠で文章を組んでいく性質があります。そのため、実際の文字を構成する線は、正方形の少し内側に作成されています。そして、実際の文字を囲う枠を「字面(じめん)」と言います。

なぜ文字組をするのか?

テキストを打ち込むと、「正方形」と「字面」の間のわずかに隙間を設けることで文字と文字が近づき過ぎないようにし、読みやすさを保つように設定されています。そのためベタ組みをした場合、「正方形」と「字面」の隙間が文字によって異なるため、不自然な隙間が生まれているのです。

 

カーニングとトラッキング

文字詰めを行い方法には、大きくふたつ「カーニング」「トラッキング」があります。

カーニングとは?

特定の文字の組み合わせに対して文字間の隙間を調整するものです。主に欧文フォントの調整に使う処理になります。このカーニングに似た操作に「トラッキング」というものもあります。

トラッキングとは?

テキスト全体または選択した部分のテキストに対して等間隔に揃え調整するものです。

 

カーニングのやり方

隙間を調整(カーニング)したい箇所に、カーソルを置きます。パネルから数値を選択、または入力し調整する方法と、ショートカットとして[alt]+[←]または[→]矢印で狭めたり、広げたりすることができます。

カーニングのやり方

 

カーニングには「メトリクス」と「オプティカル」という自動設定がある

オプションパネルから数値を選択しようとすると、項目の中に「メトリクス」「オプティカル」というものがあるのに気が付きましたか?正直よくわからないから触れてこなかった・・・。なんて人も多いのではないでしょうか。これらはどちらも、自動で文字間を調整してくれる便利な設定です。

メトリクス

フォントの内部情報により文字間が調整される自動設定になります。その情報のひとつに、「ペアカーニング」があります。ペアカーニングとは、特定の文字の組み合わせ(ペア)ごとに設定された情報のこと。欧文で例をあげると「To」「Tr」「We」「Wa」「Ya」「Yo」「P.」などが存在します。また「和文フォント」や「カタカナ」にも、欧文フォントほど多くはありませんがそれぞれの文字の組み合わせに応じた情報が設定されているものがあります。身近なフォントの例としては「ヒラギノ」や「小塚」などがそれにあたります。

メトリクス

オプティカル

オプティカルは、内部情報ではなくアプリケーション(PhotoShopやIllustrator)が独自に判断をして、文字間を調整する自動御設定になります。

 

トラッキングのやり方

隙間を調整(トラッキング)したいテキスト全体を選択します。パネルから数値を選択、または入力し調整します。

トラッキングのやり方

 

実際にやってみる

ひらがなとカタカナは原則詰めること

漢字の場合はベタ組みでも違和感がないことがありますが、ひらがな、カタカナの場合は、必ず詰めるようにします。試しに「おめでとう」とベタ組をしてみると、下図の上のようになります。一見自然にも見えますが、それぞれの文字間が若干広がっているのが気になります。全体をトラッキングで調整しつつ、「と」と「う」のところなど、他に比べて地面が広いので、カーニングで調整をしましょう。

ひらがなとカタカナは原則詰めること

漢字とひらがなの並びは、余白が生まれやすい

また、漢字とひらがな、漢字とカタカナを続けて並べる場合には、余白が生まれやすいので注意が必要になります。

漢字とひらがなの並びは、余白が生まれやすい

「誕」と「生」の間隔と、「日」と「お」の間隔に違いが見られますので、カーニングを行います。

句読点(、。)の後は余白ができる

句読点(、。)の後は余白ができる

「世界は、」の後ろに余計なスペースが生まれてしまっています。「、」と「手」の間隔を詰めて調整をすると一番下のように整います。

英字表記で斜めのラインが含まれる文字の前後は余白ができる

「世界は、」の後ろに余計なスペースが生まれてしまっています。「、」と「手」の間隔を詰めて調整をすると一番下のように整います。  ■英字表記で斜めのラインが含まれる文字の前後は余白ができる

「W」の後ろに微妙な隙間があります。「W」と「e」の間のカーニングで調整をすると、一番下のように整います。同じように「A」なども気をつけるようにします。

英字表記で「()」や「<>」などの前後は余白ができる

英字表記で「()」や「<>」などの前後は余白ができる

使用する書体や文字によって、「正方形」と「文面枠」に違いがあるので、その都度どの程度字詰めをするべきなのかは、見た目的な判断も交えて感覚で判断するしかありません。繰り返し実践しながらその感覚は磨いていきましょう。オンライン上で練習ができるサイトもあります。点数も割り出してくれるので試してみると良いかもしれません。

KERNTYPE

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > Design > その隙間を見逃すな!文字組を怠るべからず。