タイポグラフィの基礎:文字の調整方法

タイポグラフィの基礎、文字の調整方法について、変化の付け方をご紹介します。

文字をただ打つだけでなく、組み方を工夫するだけで、既存の書体を使っても多彩な表情を出すことが出来ます。

※サンプルの文字サイズを20Qと書いていますが、ディスプレイ上でのサイズではなく、あくまでの設定の参考として見て下さい。
※サンプルの作成はAdobe Illustratorで行っています。

1.ベタ組み

トラッキングとカーニング 03
ヒラギノ角ゴW3 / 20Q / ベタ組み

アプリケーションに打ち込んだそのままの状態です。

2.文字間を空ける(トラッキング)

ヒラギノ角ゴW3 / 20Q / トラッキング100

文字と文字の間を全体的に空けるトラッキング(tracking)処理を値100でかけた状態です。
字間を広げることでゆったりとした印象になります。

3.文字間をもっと空ける

ヒラギノ角ゴW3 / 20Q / トラッキング500

トラッキングを500に設定したもの。2.よりもさらに字間が広がり、1.と同じ書体を使用しているにも関わらず、大分イメージが変わります。

4.文字間を調整する(カーニング)

ヒラギノ角ゴW3 / 20Q / ベタ組みからカーニング調整

一文字ずつ、文字と文字の間隔を調整することをカーニング(kerning)と言います。
1.のベタ組みのテキストを見ると、英数字や漢字同士の字間と比べると、後半の「さ」「れ」「ま」「し」「た」の辺りの字間は開いているように見えます。
文全体の文字間が同じように見えるために「さ」「れ」「ま」「し」「た」の字間を詰めるカーニングを施したのが4.になります。
細かい調整ですが、1.と比較すると緊張感が出てきます。

5.文字間をカーニング調整したものにトラッキングをかける

ヒラギノ角ゴW3 / 20Q / カーニング調整したものをトラッキング50

4.でカーニング調整をしたものを2.と同様にトラッキングを50に設定して、全体的に字間を空けます。
5.と2.のものを比較すると、2.の方は後半のひらがな同士の字間が開いていてバランスが悪く感じます。

6.書体のウェイトを変える

ヒラギノ角ゴW6 / 20Q / カーニング調整したものをトラッキング50

強調したい時はフォントのウェイトを太くするなどして、変えます。
ウェイトを変えると、字間の見え方も変わるので、その都度カーニング調整をする必要があります。

7.欧数字の書体を変える

ヒラギノ角ゴW6 / [欧数字]Futura Bold  / 20Q /
カーニング調整したものをトラッキング50

欧数字の箇所の書体を欧文の物に変えると、ガラッと表情が変わります。
特に、欧文書体は和文よりも数が多く、バリエーションも豊かなので、欧数字箇所のみを変えるだけでも変化を付けられます。
欧数字の書体を変える際のコツは、「和文書体と同じくらいの太さか、やや太い書体を選ぶ」ようにするとバランスが取りやすいです。

今回はFuturaのBoldを使用しました。

8.欧数字の書体を和文書体に合わせてサイズを拡大する

ヒラギノ角ゴW6 / [欧数字]Futura Bold(110%拡大) / 20Q /
カーニング調整したものをトラッキング50

欧文書体はデフォルトだと、同じ文字サイズ設定をしても和文書体よりも字面(サイズ)が小さい物が多いので、欧文書体の箇所のみ少し拡大すると和文とバランスが取れるようになります。
今回は110%に拡大しました。

9.仮名の部分の書体を変える

ヒラギノ角ゴW6 / [仮名]リュウミンB-KL / [欧数字]Futura Bold(110%拡大) /
20Q / カーニング調整したものをトラッキング50

ひらがな・カタカナなど、仮名書体の部分だけ書体を変えると、またイメージが変わります。

今回はひらがなの部分を明朝体のリュウミンB-KLに変更しました。明朝体を使用すると柔らかい印象がでます。

ここまでが本文など、基本的な文字組みの調整方法です。

以下に、見出しやタイトルに使用する時のさらなる調整のバリエーションを記載します。

10.助詞を小さくする

ヒラギノ角ゴW6 / [仮名]リュウミンB-KL / [欧数字]Futura Bold(110%拡大) / 40Q / 「に」「が」24Q / カーニング調整したものをトラッキング50

「が」「の」「を」「に」「へ」「と」「から」「より」「で」「や」などの助詞(主に格助詞)の文字を縮小すると、「2008年」「iPhone」「発売されました。」などのそれぞれの単語が際立ってくるので、タイトルや見出しでこの処理を行なうと目につきやすくなります。

今回は、基本サイズ40Qのところ、「に」「が」を24Qにして60%縮小しています。

このような処理をする時は40〜70%程度の範囲で、出来るだけ基本サイズから差をつけるようにした方が良いです。

11.さらに複雑な調整

秀英明朝M / [仮名]Ro小町M / [欧数字]Sheila Bold(130%拡大, ベースライン+4H, 0.75mm太らせ) / 40Q / 「に」「が」24Q / カーニング調整したものをトラッキング50

明朝体をベースに、欧数字に欧文のスクリプト体を使い、助詞には小町という古風な仮名書体を使用しました。

使用したSheilaというスクリプト体はクセが強いので、和文書体とのバランスを取るのが難しいですが、今回は130%拡大して、ベースラインを4H上に上げ、文字の周囲を0.75mm太らせました。

表情の異なる3つの書体を使用していますが、丁寧に処理することでまとまりと、個性のあるタイトルデザインが出来ます。

まとめ

今回、11個の文字調整のバリエーションをご紹介しましたが、必ずしも複雑な調整をすればするほど良いデザインが出来る…という訳ではありません。

目的に合わせてどのような文字調整が必要になるかを見極めることが大切です。

投稿者: Shu Watanabe

I was born in Tokyo, Japan in 1982. Editing photo book and exhibitions of young photographers, handling book design and others, while teaching information design and marketing at educational institutions. The fun of the design process visualizing the stories of objects, As a medium that can convey different messages depending on how to edit I am pursuing photo book and photograph should be. 1982年東京生まれ。デザイナー、編集者。 教育機関で情報デザインやマーケティングを教えながら、若手写真家の写真集や展示の編集から、ブックデザインなどを手がける。 対象の持つストーリー性を視覚化するデザイン過程の面白さ、編集の仕方によって異なるメッセージを伝えることのできるメディアとしての写真集、写真のあり方を追究している。

コメントを残す

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

CAPTCHA