デザイン初心者でも出来る!適切な欧文と和文書体の使い方と見栄えするタイトルの作り方とは!?

デザイン初心者でも出来る!適切な欧文と和文書体の使い方と見栄えするタイトルの作り方とは!?

デザイン初心者は世の中の書体の多さにどの書体が適切なのかわからないと思います。

デザインをする際に欧文と和文書体があり使い方や設定で見た目は大きく異なります。特に文字サイズが大きいタイトルなどは影響が大きいです。

この記事では、欧文と和文書体の使い方やタイトルで使う場合の説明を書いています。

デザイン初心者は欧文には欧文書体を選択しよう!

書体の中に和文書体にも欧文文字は登録されているので利用できます。ですが、欧文を使用する際は基本的には欧文書体を使用することで見た目が美しく、またはかっこよく仕上げることができます。

欧文には欧文書体が適している理由として、和文書体(日本語を入力できる書体)にも欧文(半角英数字で入力できる)は登録されていますが、和文書体は日本語文章を読みやすく美しく表現するためにデザインされた書体です。ですので、欧文の表現は得意としていないのです。

そのため、欧文を使用する際は、基本的には欧文書体を使用することが望ましいと思います。和文書体が日本語文章を読みやすく美しく表現できることと同じように欧文書体は数字や英字などを入力した際に、見た目の並びが美しくなるように設定されています。下図を見てみましょう。

和文書体と欧文書体の違い

使用している書体以外はまったく同じデザインですが、全体のイメージが和文書体と欧文書体で異なることがわかると思います。

下図の作例では和文書体を使用しています。

和文書体でデザイン

和文書体で表現することも悪くはないですが、なんとなく字間が開いているため間延びしたようなデザインになってしまっています。

下図の作例では欧文書体を使用しています。

欧文書体でデザイン

欧文書体を使用することで字間が適切に調節されており見た目に締まりのあるデザインになっていると感じます。使用する書体によって見た目のイメージは大きく異なることがわかります。

デザイン初心者は欧文書体でプロポーショナルフォントを使うと良い!

欧文書体のほとんどは「プロポーショナルフォント」と言われる書体です。

プロポーショナルフォントとは、あらかじめ文字幅の情報が設定されている書体です。プロポーショナルフォントは、文字ごとに文字幅が設定されているので入力時に字間が自動的に調整されます。入力後に字間を調整しなくても見た目にバランスの良い文字列になりやすいです。

プロポーショナルフォントではない文字幅が均等な書体のことを「等幅フォント」と言います。等幅フォントは文字幅がすべて同じです。入力した状態では字間がバラバラになることが多く、字間をツメる作業等が発生します。下図に違いの表記をしていますので見てみましょう。

等幅とプロポーショナルフォントの違い

特別な理由がない限り欧文書体を使用する際はプロポーショナルフォントを選択しましょう。

デザインをする際に和文中の欧文を使用することもあります。

ほとんどの場合、欧文書体は和文書体よりも少し小さく設計されていることが多いです。和文の一部に英字や数字が混在する場合は、見た目が和文書体と同じ大きさに見えるように調整する必要があります。下図を見てみましょう。

欧文書体は大きさを和文書体に合わせる

和文の中で欧文書体を使う場合は、欧文書体のみ大きくしてサイズを調整すると見た目がよくなります。

デザインするソフトウェアの設定でフォントサイズを揃えるだけでは大きさのみ合わせることはできますが、欧文書体と和文書体では文字の高さに違いがあるため、和文書体と高さも揃えるようにしましょう。

微妙な調整になりますが揃えることの重要性はデザインをするうえで大切なことです。

欧文書体は高さを和文書体に合わせる

和文書体と欧文書体で異なる書体の組み合わせを行う場合には、必ずと言っていいほど書体の大きさと高さ調整は行います。

欧文・和文書体を上手に使った見栄えが良いタイトルの作り方とは!

デザインをする際にタイトルや見出しのような目立つ部分を制作するときは、字間(文字の間隔)を調整します。

とても微量な調節ですが、ほんの少し調整すると見栄えがとても良くなり見た目が美しく、かっこよくなります。

目立たせる文字は打ち込んだままではなく字間を調整しましょう。

文章として読ませる部分ではなく、注目させる、目立たせたいタイトルや見出しのようにビジュアル的に仕切る場合に使用する文字の場合は、文字を入力した後で見た目を確認しながら1文字づつの字間を調整することが望ましいと思います。

微量ではありますが、ほんの少しだけ字間を調整すると全体の見栄えがとても良くなり、美しくまとまりのあるデザインを演出できます。

ではなぜ、欧文書体は欧文に和文書体は和文に適したデザインになっているのにタイトルや見出しのようなビジュアル的要素の字間を調整しなければいけないのでしょうか。

特に和文書体の文字が「仮想ボディ」と呼ばれる正方形の枠内に収まるデザイン設計がされているためです。文字の画数や見た目の大きさは文字によって異なりますが、仮想ボディの大きさは全て一律であるため、何も設定を行わない初期設定での打ち込みを行うとベタ組みになります。

すると画数の少ない文字の左右に余分な余白が生じてしまいます。これが、1つの単語や文章になったときに1文字1文字の空きが異なるため、見た目にしまりがない文字列になってしまうのです。

タイトルや見出しの文字を美しく見せるためには、文字同士の間隔が均等に見えるように見た目で調整することが大切です。

これをゲシュタルトの法則で言い換えるなら文字列に不自然な余白が発生することで1つの単語や文字列が複数にわかれて見えそうな要因になっているため見えた目が悪くなっていると言うことです。ゲシュタルトの法則については下記の記事を参考にしてください。

「デザインはゲシュタルトの法則でグループ化が有効!綺麗な演出は「コントラスト」と「揃える」で決まる!」の記事はこちらから

和文書体と欧文書体の仮想ボディを見てみましょう。

和文書体は、すべての文字が同じ大きさの仮想ボディに収まるように設計されています。

欧文書体のプロポーショナルフォントは、文字の種類によって仮想ボディの幅が異なります。

和文書体と欧文書体の仮想ボディ

和文書体と欧文書体が混在する文字列や文章はデザインする機会が非常に多いと思います。

デザイン初心者には同じアルファベットと数字なのに和文と欧文で字間が異なるため何故大きさや文字の高さが合わないのか理由がわからないことだと思います。和文書体と欧文書体の特徴がわかるとその理由もわかります。

また和文と欧文が混在する文字列への注意すべきポイントも意識できることだと思います。

和文書体の文字列を見た目によくするにはツメを行うと良いでしょう。

日本語では画数や字形が異る文字が多く混在しています。ベタ組みの入力でもそれなりに整っているように見えますが、ただ入力しただけでは字間が不均等になってしまいます。

和文書体を見た目をよくするには

読ませる文章としてベタ組みは大きな影響はありませんが、タイトルや見出しのように目立つ部分では少しの不均等が大きくなり字間の調整を行わないと見た目のバランスが悪くなります。

ソフトウェアの字間数値ありきではなく、字間は「人の目で確認」して決める!

私がデザイン制作として間もない頃ですが、こんなやりとりをしたことがあります。

ソフトウェアでの数値上このようになっています。だからこのような見た目になります。と回答ししたことがります。今思い起こせば、よくそんなことが言えたなと思います。当時はデザインの知識が何もない私に上司から「見た目に揃っているのか、どうかであり。数値上ではない。」と叱られました。

ですので、字間や高さの調節は数値上での設定ではなく、数値を調整しながら人が見た時にバランスや調和が取れているかというアナログ的要素も取り入れながら調節した結果が最終的な数値なのです。

字間の調節は数値ありきではなく、人が見た時におかしくないかどうかがポイントなのです。

字間調整に関しては和文書体や欧文書体それぞれで設定が異なるため「この設定が正しい」といった統一的なルールは存在していません。

文字列を読み手の目線で眺めて少しず字間を調整します。参考になる印刷物やデザインを見ながら自分自身でも「美しくなった」と思う間隔に設定します。はじめのうちはなかなか難しい設定ですが、何度か繰り返すうちに少しづつポイントがわかってきます。

字間を調整する技法のことを「カーニング」と言います。間隔を狭くすることを「ツメ」といい、広げることを「アキ」といいます。文字を入力した後にカーニングを行うことで見栄えが良くなるように調整します。

文字の間隔を調整することによる見た目の違いを下図で見てみましょう。

ベタ組みでは「天」と「気」の間が詰まって見えます。また「ハ」と「レ」の間が空いて見えます。カーニングで全体をツメると文字列が強調され、アキに設定するとゆったりとした印象になります。

字間を調整すると見た目は変わる

微量な設定ですが、読み手に読みやすく情報伝達を行うには字間を適切に調節することが大切です。

和文書体と字間調整の基本ポイントとは!

カタカナやひらがなは漢字に比べると字間が空いて見えます。

特に「ア」や「ト」などは、仮想ボディに対して文字が小さいため字間の空きが大きく生じます。また、句読点(約物)などがある場合は、その前後に空きが生じることが多いです。きちんと字間を調整するようにしましょう。

使用する書体で見た目は変わりますが、漢字は画数が多い字がたくさんあるため比較的詰まって見えます。打ち込んだ文字列をよく見て字間を調節しましょう。

ベタ組の初期設定では不自然になる

ベタ組みではカタカナと漢字の間隔や括弧と後ろの文字が大きく空いてしまうなど、全体の余白がバラバラなのが確認できます。字間を適切に調整すると読みやすく整ったイメージになります。

欧文書体の場合は、プロポーショナルフォントを使用することである程度読みやすく文字列が作れます。

欧文書体でも文字によっては、隣り合う字間に違和感が発生する場合があります。例えば、「W」と「A」を並べると縦線が平行に並ぶためベタ組みでは、字間が空いて見えてしまいます。下図を見てみましょう。

欧文書体でも多少調節は必要

ベタ組みでは「W」や「A」など平行線が並ぶと若干離れて見えてしまいます。「V」と「E」の間隔と比べると空きを確認できる思います。字間を調整すると文字列が強調され見た目に美しく感じられます。

また「T」と「A」が隣り合う場合も「T」の下部に空きがあるため、空いて見えてしまいます。このような場合も見た目で均等に見えるよう調整しましょう。

欧文書体の数字によっては前後に「空き」や「詰まり」が発生してしまいます。例えば「1」の場合は前後に空間が空いてしまうことがあります。下図を見てみましょう。

下図の左側は「1」の前後は空きが発生しやすいので、適切な見た目の調整が必要です。

下部の右側は「T」と「A」を並べると「T」の下に空きが発生するため、適切な見た目の調整が必要です。

「1」や「T」「A」が隣り合う場合

このような現象は書体によって程度が異なるため、文字列をよく見る必要があります。

カーニング(字間調整)は手抜きしてはいけません。必ず文字の間隔を調整するの一言に尽きますが、設定次第でとても読みやすくきれいになります。反面、設定によっては思っていたよりも見づらくなる場合もあります。シンプルな技法ですが技量によって違いが生じやすいでしょう。

カーニングを行って文字列そのものを美しく仕上げたうえで、デザイン要素を加えるとより良い仕上がりになることだと思います。

デザイン初心者でも欧文と和文書体の使い方と見栄えするタイトルの作り方のまとめ

  • デザインや文章に欧文を使う場合には欧文書体を使用する。
  • 欧文書体でもプロポーショナルフォントを使うと良い。
  • 欧文書体と和文書体が混在する場合は欧文書体を和文書体の大きさに揃えること。
  • タイトルや見出しは字間の調節を行うことで綺麗な見た目になる。
  • 文字列のバランスは人の見た目で調節すること。

デザイン初心者のうちは文字の調整はなかなか難しいものです。

特に欧文書体と和文書体が混在する場合に見た目の調整を行うのに大きさと高さのバランス調整が難しいと思います。それ以外にも文章になった場合に字間や行間も調整次第で見やすくなったり、みづらくなったりします。

バランス調整は世の中にあるデザインされたものや印刷物等を参考にするのも良いと思います。今回の記事では調整といっても微量な調整が多いですが、それだけ繊細でありバランスと調和をとると言うことはデザインの仕上がりが良くなると言うことです。

細かい調整でも手を抜かずに良い仕上がりのデザインを目指して頑張りましょう。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする