タイトルイメージ

タイポグラフィ<2>-左右のアキを揃える- 2015.01.28

Others

基本は揃える

タイポグラフィの基本は、文字の見た目を揃えること。

文字の見た目は揃えるには「文字の左右の空間(アキ)」と「文字の大きさ(濃度)」の2つを揃えることが必要です。
この2つを揃えることではじめて、文字にまとまり感が生まれます。

文字の左右の空間(アキ)を揃える

文字の左右の空間(アキ)を揃えることを、一般に「カーニング」と呼びます。(厳密には欧文組版において、です。)
似た言葉に「トラッキング」というのがありますが、トラッキングは複数文字をまとめて字間を調整することを指します。
1文字ずつ調整するのがカーニング。
全体をまとめて調整するのがトラッキング、です。

基本的には、カーニングやトラッキングを行い、左右の空間が同じになるように揃えることで文字列にまとまったように見えます。

仮想ボディと字面

和文書体の文字はすべて、同じサイズの「仮想ボディ」(正方形)の中に収められています。
また、文字そのものは仮想ボディよりも一回り小さい「字面」の中にデザインされています。
参考

文字を字面の中にデザインする理由は、文字を並べた際に文字と文字の間に適度な空間を作るためです。
これによって、そのまま文字を並べても文字の左右に適度な空間(アキ)が保たれて、読みやすくなります。

一方、欧文書体の文字は、それぞれが大きさの異なるボディに収められています。
さらに大文字、小文字と高さの異なるものを組み合わせて使うため、文字を並べる際の基準線も複数あります。
参考

和文書体、欧文書体のどちらも、複数の文字を並べた時に、文字の左右のアキが生まれる可能性があります。
和文書体は仮想ボディが統一されているため、一見揃っているように見えますが、注意して見ると左右のアキの違いに気づけると思います。
欧文書体は、ボディが統一されいないため、左右のアキは生まれやすくなっています。

漢字の場合

漢字の多くは正方形ですが、中には「月」や「日」などのようにやや細長い形や、「上」や「下」のような三角形のような形も含まれています。
そのため、漢字の組み合わせによって、左右の空間にばらつきが生じます。
それぞれの空間が均一になるように調整するといいでしょう。
typo1

上図の「十六夜日記」の場合、「日」が細長い字面のため、両サイドに大きなアキがあります。
そこで、ここでは「六」と「夜」の間のアキを基準に調整してみました。

ひらがな/カタカナの場合

ひらがなの多くは円の形ですが、「い」や「へ」のように平たい形や、「う」や「し」のように細長い形もあります。
そのため、漢字同様に組み合わせによってはばらつきが生まれます。
特に、オールドスタイルの書体のひらがなはばらつきが大きいです。
typo3

上図の「たけくらべ」は、「く」の字が細長く、左右に大きなアキがあります。
ここでは「た」と「け」のアキを基準に調整してみました。

カタカナは要素が少なく、ほとんどの文字に右上から左下に向かう線(またはその逆)が入っているので、文字列全体をまとめやすいと言えます。
ただし、中には「エ」や「ニ」のような横に平たい形や、「ト」や「リ」のような縦に細長い形も含まれているので注意です。
typo6

上図の「インターネット」は、全体として間延びした印象です。
特に「ッ」の左右に大きなアキが生まれています。
ここでは全体のアキをトラッキングで調整した後に、それぞれのアキをカーニングしてコンパクトにしてみました。

オールドスタイルとモダンスタイル

筆の趣を色濃く残している書体のことをオールドスタイルと呼びます。
仮想ボディに対して、字面が小さいのが特徴です。
一方で、ふところが広く、字面が大きい書体をモダンスタイルと呼びます。
また、両者の中間の標準的な書体をスタンダードスタイル(下図ではミディアムスタイル)と呼びます。
typo2

欧文の場合

欧文の大文字は形がバラバラなので文字の左右の空間にもばらつきがあります。
そのため、大文字だけの組み合わせの場合、左右の空間に注意してバランスを調整する必要があります。

一方、小文字の多くは楕円と垂直な線で構成されているので、文字の左右の空間はそれほど差がありません。
小文字の場合は、調整が少なくても済むでしょう。
大文字と小文字の組み合わせの場合はその限りではありません。
typo4

上図の「FLASH」では、「F」と「L」のアキを基準に調整してみました。
「A」の三角形の字形は左右のアキを感じやすくなっているので、数値上よりも意識的に狭くしました。
tyop5

上図の「Tokyo」は大文字と小文字の組み合わせです。
「o」と「k」のアキを基準に調整しましたが、「T」と「o」のアキはマイナス気味に調整しました。
この「T」と「o」のような、少し食い込ませた方がきれいに見える字の組み合わせのことを「カーニングペア」と呼びます。
他にも、「Ye」や「Po」などがあります。

数字の場合

数字の多くは同じ大きさの仮想ボディに収まっています。
しかし、「1」だけは前後の空間が目立ってしまいます。
また、「7」も右下の空間が目立ちます。
これらも他の書体と同様に左右の空間の調整が必要です。
typo7

まとめ

  • 文字の左右の空間(アキ)を調整する
  • 読めることは大前提!が、読ませることよりも見せることを重点において調整する
  • 数値よりも見た目で調整する

参考

タイポグラフィの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック- (デザインラボ)

コメントを残す

メールアドレスが公開されることはありません。コメントのみの投稿も可能です。

TOPページへ戻る

About

Creator Indexは、Webクリエーター初心者に役立つブログを目指しています。
執筆者自身が日々学んだ内容をアップしていきます。

Author

筆者イメージ

Jun

サイトリニューアルを計画中…