ferret編集部:2015年9月1日に公開された記事を再編集しています。

デザイン作業をおこなう機会がある方の中には、文字組みをあまり意識していないという方もいらっしゃるのではないでしょうか。デザインの美しさ、フォント選びももちろん重要ですが、基礎に則って文字組みをおこなうことはデザインを行ううえでとても重要です。気をつけるポイントは多数ありますが、最低限のことだけでも注意すれば、今より格段に文字を美しく見せることができます。

今回は、必ず知っておきたい文字組みの基礎ルール、カーニング、字送り、文字詰めの違いについてご紹介します。
これまで文字組みに真剣に取り組んでこなかった、という方はこれを機に是非意識してみてください。

文字組みの基礎テクニック

1.ひらがな、カタカナは原則詰める

ひらがな、カタカナは原則詰める
http://stocker.jp/diary/typographic/

ノンデザイナーであれば、あまり気にしないのが文字の間の余白ですが、実は文字の形式に応じて調整する必要があります。
漢字の場合は、文字間を調整することなくベタ組みしても問題ないことが多いですが、ひらがな、カタカナの場合には原則、詰め、隣り合う文字との余白を少なくします。
理由は、漢字に比べ、ひらがなやカタカナの余白が大きいためです。

漢字と並べた時に余白がある分、間延びしたように見えてしまいます。
特に、タイトルを書く際、短い文章を大きく表示する際に違和感が目立ってしまいがちですので注意が必要です。

2.記号は適度に詰める

記号は適度に詰める
http://stocker.jp/diary/typographic/

忘れがちな記号も適度な感覚に詰めることで、よりプロっぽいデザインに仕上がります。
、・「」。といった記号はひらがな・カタカナ同様に横に余白が生じてしまいますので文字間の調整が必要です。
タイトル、見出しで大きく扱う際、隙間があると特に悪目立ちしますので、全体のバランスを見ながら適切な余白に整えます。

3.助詞は一回り小さくする

助詞は一回り小さくする
http://www.actzero.jp/developer/report-2711.html

文章にメリハリがないと感じた時の一つの対策として、助詞を一回り小さくするという方法があります。
助詞とは、「は」「が」のような、単独では使わない、他の語に付属し意味を付加したりする言葉のことです。
例えば、「今日は晴れ」という文章の場合「は」が助詞となりますので、その他の文字よりも少し小さくすると抑揚をつけることができます。

この時、小さくした助詞は左揃えの場合は下寄せ、中央揃えの場合は真ん中揃えにするのが定番です。
また、「ファイト」の「ァ」のような小さい文字についても助詞と同じように小さくすると、さらに美しい見た目に仕上がります。

4.括弧は一番細いフォントにするとスマートになる

括弧は一番細いフォントにするとスマートになる
http://lab.sonicmoov.com/design/typesetting/

デザイナーでない方は知らない方も多いのが、括弧の取り扱いについてです。
雑誌、広告の大見出しを見るとよく分かりますが、括弧だけが細いことがほとんどです。
括弧に細いフォントを使用すると、スマートで上品な仕上がりになります。

この時、始まりと終わりの括弧のベースラインにも気をつけるとさらに見た目のクオリティを上げることが可能です。
また、括弧に細いフォントを使ってみていまいちだったり、あまり細くない場合には、Photoshopのツールを使って1pxの線で括弧を作るという方法もあります。

5.単位には少し小さいフォントを選ぶ

単位には少し小さいフォントを選ぶ
http://stocker.jp/diary/typographic/

「○○円」といった単位を含む文字を普通に組んだ場合、数字の方が「円」より小さく見えていまいちな見た目になってしまいます。
単位の入った文字列では、単位の箇所のフォントサイズを約1/2から2/3に抑えると、見やすくバランスのいい文字列になります。
この時、ベースラインがずれないように他の文字と合わせて調整が必要です。

逆に、数字だけを極端に大きくして強調するということも可能です。
スーパーの広告が参考になりますので、一度見てみましょう。

6.文字をゆがめない

文字をゆがめない
http://tsutawarudesign.web.fc2.com/yomiyasuku2.html

文字が読みにくくなる原因の一つが、文字がゆがんでいることです。
はっきりとした書体であっても、横や縦に伸ばして本来の縦横比を崩してしまうと読みにくくなってしまいます。

もちろん、見た目の良さにおいてもゆがんでいない文字のほうが美しいのは当然です。
文字のサイズを変える際に、縦横比を保ったままにしないと文字がゆがみますので注意が必要です。

7.英文、和欧混植の文章ではフォントに注意する

英文、和欧混植の文章ではフォントに注意する
http://tsutawarudesign.web.fc2.com/yomiyasuku2.html

日本語文章の中に英文を使う場合には、フォントに気を配る必要があります。
メイリオ、ヒラギノ角ゴといった定番フォントにおいては和欧混植しても美しく見えるようにデザインしてありますが、中には英文を書くと可読性が悪くなるフォントがありますので、面倒ではありますが英文部分のみ欧文フォントを使うのがベターです。

和欧混植に向く日本語フォントである場合にも、英文は欧文フォントのほうが美しく仕上がります。
日本語フォントと欧文フォントを組み合わせる場合には、雰囲気・サイズ・大きさが似ているデザインのフォントを選ぶと違和感のない見た目になります。

8.全角、半角をしっかり区別する

全角、半角をしっかり区別する
http://whatsdesign.arrow.jp/illustrator04.html

基本的なことですが、案外見落としてしまうのが全角、半角の区別です。
特に、数字・英語・記号・カタカナを使う際に、表記がばらばらになっているということは少なくないので注意が必要です。

全角、半角どちらを使うか予め決めた上で、表記を統一する必要があります。
ちょっとしたことではありますが、表記を揃えると格段に見た目も良くなり、可読性も上がります。

9.ホワイトスペースに考慮する

ホワイトスペースに考慮する
http://visualliteracy.jp/design/2080.html

文字と文字の前後だけでなく、文章の余白にも注意をすることが重要です。
文字の余白であるホワイトスペースの取り方にはある程度ルールがあり、字間の余白は行間より狭く、行間の余白は段落の間よりも狭い必要があります。
これさえ守れば、きちんとしたホワイトスペースを確保することが出来、読みにくい文章になってしまうことを防ぐことができます。

カーニング、字送り、文字詰めの違い

10.カーニング

カーニング
http://illustrator-ok.com/illustrator_koza/text/contents/text6.html

カーニングとは、特定文字と文字の間隔を調整する処理のことで、横の文字に合わせて調整をおこないます。
日本語でも使えますが、主に欧文フォントの調整に使う処理です。

カーニングを処理していない場合、文字と文字の間には空白が生じてしまいますが、最適に処理することで文字間の空白を均一にすることが可能です。
特に、キャッチコピー、見出しといった大きめのフォントサイズを使うものの場合、不自然な空白が目立つことが多くカーニング処理が重要となります。

自動で調整できる、和文等幅・メトリクス・オプティカルと、手動で数値を入力するタイプがあります。
単独で処理することもありますが、通常は字送り(トラッキング)と組み合わせて使います。

11.字送り

字送り
http://psgips.blog24.fc2.com/blog-entry-74.html

字送りは別名トラッキングともいい、文字単体ではなくまとまった文字列の調整に使用する処理のことです。
カーニング同様、通常は欧文フォントの調整に使いますが、日本語フォントにも使用することが可能です。

設定時の単位は「em」で、フォントサイズを1とした時の1/1000が1emです。
特定文字に対する相対的な値ですので、設定値が同じであってもフォントサイズ次第で結果が異なります。

12.文字詰め

文字詰め
http://webmemo.biz/kerning_tracking/

カーニングに似た処理ではありますが、文字の前後を詰めるために使う処理のことを言います。
カーニングが欧文フォント向きであるのに対し、文字詰めは日本語フォントの調整に適した処理です。
設定する際にはパーセンテージで縮める間隔を設定します。

まとめ

今回は必ず知っておきたい文字組みの基礎ルール、カーニング、字送り、文字詰めの違いについてご紹介しました。
いかがでしたでしょうか。

フォントはそのまま使っても制作者が調整している分美しいのですが、シーンによっては違和感を感じることが少なくありません。
また、必ず使わなければならないという決まりはありませんので、ある程度の基礎ルールを身につけ、あとは感覚的に使っていく必要があります。

今回ご紹介したテクニックをしっかりと理解し、実践の際に意識して文字を組めば、感覚を掴むことができます。
正解がないためプロでも難しい作業ですが、是非繰り返し作業をおこない身につけましょう。

このニュースを読んだあなたにおすすめ

作業効率グンとアップ!Photoshopの操作が捗る小技3選
デザインの雰囲気が手軽に変わるオススメPhotoshop無料テクスチャ60まとめ
Photoshopを使う際にデザインの幅が広がる無料のパターン素材80選

このニュースに関連するカリキュラム

LPOに関するカリキュラム

LPOに関するカリキュラム

LPOに関して、カリキュラム形式で学びましょう