フォントの字間、行間の考え方

Training.Ⅱ タイポグラフィー

デザインの中に文字情報を組みこむ際に重要なのは「読みやすさ」です。デザイナーとして伝わるデザインにするためにも、ただ文字フォントを流し込むだけではなく、その字間や行間にも気を配り、最適な状態になるよう調整しなければなりません。ここでは、字間や行間を調整する際にデザイナーとして知っておくべきポイントをご紹介します。

字間や行間を調整すべき理由

文字と文字の間にできる空間のことを「字間」、前行と次行の間にできる空間を「行間」と呼びます。
パソコン上でレイアウトを組む際、文字情報は自動的に表示されますが、漢字・ひらがな・カタカナなど形の異なる文字が並ぶと字間がバラバラになり、非常に読みづらい状態になってしまいます。また、文章の行間も、初期設定のままでは狭すぎる場合がほとんど。そのため、パソコン画面に表示された文字情報を見ながら字間と行間を調整し、文字のバラつきを減らす必要があるのです。

カーニングとトラッキングの違い

デザインソフトを使って文字を表示させる際、字間を整えるために使用するのが「カーニング」と「トラッキング」です。どちらも字間調整用のツールですが、その役割は少し違います。

カーニングは、特定の文字と文字の間にできる空間の大きさを調整するもの。隣あった文字の組み合わせに対して使用します。

トラッキングは、個別の文字ではなくテキスト全体の文字間を調整するもの。文字の右側の空間だけが変化します。

カーニングは部分的な字間、トラッキングは全体的な字間の設定をするものとも言えます。

字間や行間を整えるときのポイント

デザインソフトを使って字間と行間の調整を行う際に、覚えておきたい点をまとめました。以下を踏まえて、誰にでも読みやすい文字情報をデザインに組み込みましょう。

見た目に合わせて文字のサイズや太さを調整する

日本語の文章は「漢字」「ひらがな」「カタカナ」「数字」「アルファベット」などさまざまな文字種で構成されています。
文字のフォントは文字種によってサイズが微妙に異なるため、一番大きな「漢字」を基準としてほかの文字種のサイズを揃えるのが一般的な調整方法です。

文字が横組みの場合は一番大きな文字の「高さ」に合わせて、文字が縦組みの場合は一番大きな文字の「幅」に合わせて揃えていきます。

また、文字のサイズを揃えると、大きくした文字はほかの文字よりも線が太くなる場合があります。
必ず視認し、太くなっている場合は漢字やほかの文字も太くして見た目を揃えましょう。

文章の長さによって行間を調整する

デザインの中に長めの文章を入れる場合、行間の調整が重要になります。特に、何行にもわたる長文を入れるとなると、行間をしっかりと空けて読みやすくしなければなりません。

1行当たりの文字数や使用するフォント、ウェブデザインの場合は表示させるブラウザによっても行間は異なりますが、ほとんどの場合、初期設定のままではやや狭い印象を受けるはず。
目安としては、文字サイズの約70％の行間を入れることで快適に読めるようになります。

フォントを混ぜて使うときは文字のサイズを調整する

2種類以上のフォントを混ぜて使用することを「混植」と言います。和文のフォントにある英数字は横組みの使用を想定していない場合が多く、横組みの文章に日本語と英単語が並んでいると違和感が出てしまうことがあります。
そのため、英数字にのみ欧文フォントを使い、和文フォントと混在させる「混植」の手法を取るのが一般的です。

しかし、その際に起こりやすいのが“サイズ感”の違い。和文フォントの日本語と、欧文フォントの英単語を並べると、どうしても英単語が小さくなってしまいがち。
そこで、英文フォントのサイズをやや大きめに調整し、文字の高さを揃えるという作業が必要になります。

字間や行間の調整は、文章をより読みやすくするために欠かせない作業です。数値を設定することで調整は簡単にできますが、最終的にはデザイナーが自分の目で見て判断し、美しく揃えましょう。文字情報も、デザインの一部なのです。

Day.8 フォントレイアウトの決め手となるジャンプ率についてに進む→

トレーニングコラム Day.7 | フォントの時間と行間