綺麗な文字組は『文字詰め』から

つみきのデザイナー若月です。フォントの話 第10話。
今回は文字詰めについて。
文字詰めとは、文字同士の間隔を調整する事で、主に見出しやキャッチコピーの見栄えを整えるために行う技法のことを言います。
Htmlの本文は意図した文字組みができないため、Webデザイナーには文字詰めが不得意な人が多い印象があります。
僕もあまり得意ではないので、おさらいの意味も込めまとめました。

なぜ文字詰めが必要なのか?

和文の場合で説明します。
和文の文字は正方形(仮想ボディ)の中に収まるように調整されており、
その『仮想ボディ』をぴったり合わせて文章を組んでいきます。これを、ベタ打ちといいます。
そのため、実際の文字は仮想ボディぴっちりではなく、さらにその内側に作成する必要があります。
実際の文字を縁取る枠を『字面』といいます。

文章を組む場合は、『仮想ボディ』と『字面』の間の隙間によって文字同士が接触せずに、読みやすさを保つことできます。 ベタ打ちをした場合、『仮想ボディと』『字面』の隙間が文字によって異なるため、 並べたときに、不自然な空きが生じます。
その空きを整えるために文字詰めが有効になります。


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

Photoshopなどのグラフィック作成ソフトで、文字詰めを行う方法は大きく2種類あります。

カーニング

調整詰め。前後の文字にあわせて調整することです。
一文字ずつ調整したい文字と文字の間にカーソルを合わせてから設定します。
主に見出しやキャッチコピーなどの見栄えを整えるときに使用します。

トラッキング

均等詰め。文章全体を均等に詰めることです。
調整したいテキストの範囲やテキスト全体やを選択してから設定します。
主に本文に使用します。

サンプル

実際に文字詰めを行ってみました。 どうでしょうか?カーニングを行ったものはベタ打ちよりも塊感があり、目に入ってきやすいんじゃないかと思います。
文字は詰めるだけではなく、用途によっては広げる場合もあります。
その際も文字間隔のバランスが整っているように調整しましょう。

まとめ

書体や文字によって詰める数値が違うので、正解を出すのが難しく、 最終的には視覚的にバランスが整うように調整をするという感覚的な作業になります。
コツは数値上等間隔ではなく、視覚的に間隔を揃えるというところかなと思います。

僕もあまり得意ではないのですが、下記のようなサイトを使って、トレーニングをするのもひとつの方法かなと思います。 KERNTYPE

文字詰めを意識したデザインを繰り返したり、整えられた文字組みを見ることで
感覚を養っていきましょう!

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ