文字のサイズ・太さ・間隔とは?見え方が変わる3つの要素を初心者向けに解説

文字のサイズ・太さ・間隔の基本

まずは、文字の見え方を決める3つの要素がそれぞれ何を指すのかと、なぜ最初にこの3つを学ぶのかを押さえましょう。

文字の見え方を決める3つの要素

文字の見え方は、サイズ(大きさ)・太さ・間隔の3つでほぼ決まります。

どれも書体を変えずに調整できる要素で、同じ文章でも組み合わせ次第で目立ち方や読みやすさ、雰囲気まで変わるからです。

3つの要素は、それぞれ次のものを指します。

• サイズ:文字そのものの大きさ
• 太さ:文字の線の太さ。デザインの世界では「ウェイト」とも呼びます
• 間隔:文字と文字のすき間(字間)と、行と行のすき間(行間)の2つ

なお、厳密には、行と行のあいだの空き(行間)と、ある行から次の行までの距離(行送り)を分けて呼ぶこともあります。

行送りは、1行目の文字の上端から2行目の文字の上端までのように、行の同じ位置どうしを測った距離で、文字の高さと行間を合わせた長さになります。

デザインツールによって設定の名前が「行間」だったり「行送り」だったりしますが、初心者のうちは名前よりも、文章が詰まって見えないか、すっきり読めるかという見た目で調整できれば十分です。

この記事では、行と行の空き具合をまとめて行間と呼びます。

つまり、文字を整えるときは「どのくらいの大きさで、どのくらいの太さで、どのくらい空けて並べるか」の3つを考えればよい、ということです。

書体や揃え方も含めたタイポグラフィ全体の話は、タイポグラフィとはで紹介しています。

書体選びより先にこの3つを学ぶ理由

タイポグラフィを学び始めるなら、書体の種類を覚えるより先に、サイズ・太さ・間隔の感覚を身につけるのがおすすめです。

この3つは、どんな書体を選んでも必ず関わってくる、いわば文字のデザインの土台だからです。

たとえば、評判のよい書体を選んでも、全部の文字が同じ大きさで行間が詰まっていれば、読みにくいデザインになってしまいます。

反対に、標準で入っている書体だけでも、3つをきちんと整えれば十分に見やすいデザインになります。

まずは土台となる3つで「変えると見え方がこう変わる」という感覚をつかみ、そのあとで書体選びに進むと理解が早くなります(複数の書体を組み合わせるコツはフォントペアリングとはで紹介しています)。

サイズ・太さ・間隔を変えると見え方はこう変わる

ここからは、同じ文を1つの要素だけ変えて並べた見本で、それぞれの効果を体感していきます。

詳しい単位や数値、設定方法はそれぞれの解説記事に任せ、ここでは「何が変わるのか」に集中しましょう。

サイズ:どこから読むかの順番が変わる

文字のサイズを変えると、読む人の目がどこに最初に向かうかが変わります。

人は文章を頭から順番に読む前に、まず大きな文字を拾って内容の見当をつけるからです。

次の2つの見本は、文章も書体も太さもまったく同じで、サイズだけを変えています。

見本Aは3行が同じ重さで並んでいるため、どれが一番伝えたいことなのか、全部読むまで分かりません。

見本Bはタイトルだけが大きいので、ぱっと見た瞬間に「パン教室のお知らせだ」と伝わり、そのあと説明、日時の順に目が流れます。

このように、サイズは「重要度の順番」を見た目で伝える、いちばん分かりやすい手段です。

見出しなどの一番大きい文字と、本文の大きさの比率のことを「ジャンプ率」と呼び、差が大きいほど勢いやインパクトのある印象に、小さいほど落ち着いた印象になります。

文字サイズの単位や、見出し・本文・注釈ごとの決め方は文字サイズとは、見出しと本文のサイズの差についてはジャンプ率の記事で詳しく解説しています。

太さ:強さと印象が変わる

文字の太さを変えると、その言葉の強さと、全体の印象が変わります。

太い文字は面積が大きく黒っぽく見えるので目を引き、細い文字は軽く控えめに見えるからです。

次の3つの見本は、同じ言葉を同じサイズで、太さだけを変えたものです。

※細い太さが入っていない環境では、見本Aは標準の太さで表示されます

見本Aは「静かな朝」という言葉の雰囲気に合った落ち着きがあり、見本Cは同じ言葉なのに元気で主張の強い印象になります。

太さは、目立たせたい部分を強調するときにも使います。

ただし、強調はたくさん使うほど効かなくなる点に注意が必要です。

NGの見本は太字が多すぎて文全体が重くなり、結局どこを見ればよいのか伝わりません。

OKの見本は「今月末まで」だけが浮かび上がるので、急いで読んでも締め切りを見落としません。

太さの段階の名前や、見出し・本文での使い分けは、フォントの「太さ(ウェイト)」で詳しく解説しています。

字間:まとまりと雰囲気が変わる

字間(文字と文字のすき間)を変えると、言葉のまとまり方と、ゆったりした感じ・引き締まった感じが変わります。

文字どうしが近いと1つのかたまりとして目に入り、離れていると1文字ずつがばらばらに見えるからです。

次の3つの見本は、同じ見出しを字間だけ変えて並べたものです。

見本Aは文字が重なりそうなほど詰まっていて、読む前から息苦しい印象を受けます。

見本Cはゆったりした雰囲気は出ますが、空けすぎて「新・し・い……」と1文字ずつ拾う読み方になってしまいます。

字間は少し変えるだけで雰囲気が大きく変わるので、まずは見本Bのように「まとまって読めるか」を基準に見るとよいでしょう。

字間の調整には、特定の文字どうしの間だけを個別に詰める「カーニング」と、選んだ文章全体の字間をまとめて広げたり詰めたりする「トラッキング」の2つがあります。

たとえば英字の「A」と「V」のように、並べるとすき間が空いて見える組み合わせを詰めるのがカーニングで、見出し全体を少し引き締めるのがトラッキングです。

字間の整え方や、文字の組み合わせごとに間隔を調整する方法は、カーニングとトラッキングで詳しく解説しています。

行間:読み進めやすさが変わる

行間(行と行のすき間)を変えると、何行も続く文章を読み進めやすいかどうかが変わります。

1行を読み終えて次の行の頭に目を戻すとき、行と行が近すぎても遠すぎても、目が迷いやすくなるからです。

次の3つの見本は、同じ文章を行間だけ変えて並べたものです。

見本Aは文字がぎっしり詰まって見え、読み始める前から疲れそうな印象を与えます。

見本Cは一見すっきりしていますが、行が離れすぎてひと続きの文章に見えにくくなっています。

字間と行間はどちらも「間隔」ですが、字間は言葉のまとまり、行間は文章の読み進めやすさに効く、と分けて覚えておくと整理しやすくなります。

読みやすい行間の目安や、1行の長さ(行長)との関係は、行間と行長で詳しく解説しています。

3つは互いに影響し合う

サイズ・太さ・間隔は、別々のつまみのように見えて、実は1つを変えるとほかの2つの見え方も変わります。

文字を大きくしたり太くしたりすると、文字の形とすき間の釣り合いが変わるからです。

次の2つの見本は、どちらも同じ大きさ・同じ太さの見出しで、字間だけを変えています。

見本Aは、文字が大きくなったぶんすき間も大きくなり、間延びして見えます。

文字を大きくすると、文字の左右にある余白も大きさに合わせて広がります。

本文くらいの大きさでは気にならなかったすき間も、大きな見出しにすると幅そのものが大きくなるので、スカスカと目立ってしまうのです。

見本Bは字間を少し詰めたことで、大きな見出しがぎゅっと引き締まり、1つの言葉として力強く見えます。

「文字を大きくしたら、字間も少し詰める」とセットで覚えておくと、締まりのない見出しを防げます。

同じように、文字を太くすると文字どうしが近く見えて窮屈になりやすく、本文を大きくすると行間も少し広げたくなります。

1つを変えたら、ほかの2つも「これで釣り合っているか」を見直す、という習慣をつけておくと仕上がりが安定します。

文字のサイズ・太さ・間隔を身につける実践のポイント

最後に、3つの要素の感覚を育てる練習方法と、初心者がつまずきやすい点、よくある疑問をまとめます。

身の回りのデザインで3つを観察する

サイズ・太さ・間隔の感覚を身につける近道は、身の回りのデザインで3つを意識して観察することです。

見本で効果を知っても、実際のデザインでどう使われているかを見ないと、自分で使うときの加減が分からないからです。

よく見るWebサイトやお店のチラシを1つ選び、次の3つの視点で眺めてみましょう。

• サイズ:一番大きい文字はどれか。
  2番目、3番目に大きい文字は何か。
• 太さ:太い文字はどこに使われているか。
  本文の中で太字になっているのはどんな言葉か。
• 間隔:見出しの字間は詰まっているか、空いているか。
  本文の行間はゆったりしているか、詰まっているか。

「高級そう」「にぎやか」と感じたデザインほど、3つのどれかに特徴があることに気づくはずです。

観察の視点や練習の進め方は、タイポグラフィの観察方法で詳しく紹介しています。

注意点・よくある間違い

• 目立たせたい気持ちから、サイズも太さも一度に何段階も使ってしまう。
  段階が多いほど差が分かりにくくなるので、まずは「大・中・小」くらいに絞りましょう。
• サイズを変えたのに、字間や行間はそのままにしてしまう。
  大きくした見出しは間延びし、小さくした文字は詰まって見えやすいので、間隔も合わせて見直しましょう。
• 本文の行間を詰めて、1画面に多くの文字を入れようとする。
  行と行が近すぎると、次の行の頭に目を戻すときにどこを読んでいたか見失いやすく、読むのがつらい文章になります。
  載せる文字を減らしたいときは、行間を詰めるのではなく、文章を短くまとめる、見出しで区切る、別のページに分けるなど、情報そのものを整理しましょう。
• デザインツールの画面を拡大した状態だけで判断してしまう。
  実際の大きさで見ると印象が変わることが多いので、仕上げる前に実際の画面や印刷物の大きさで確かめましょう。

よくある質問

• Q. 3つのうち、どれから意識すればよい?
  A. まずはサイズから意識するのがおすすめです。
  サイズの差は一番分かりやすく、読む順番を決める効果も大きいので、ここが整うだけでデザインの見通しがよくなります。
• Q. 強調したいときは、大きくするのと太くするのはどちらがよい?
  A. 見出しのように読む順番を決めたいときはサイズ、文章の途中の一部だけを目立たせたいときは太さ、と使い分けると自然です。
  本文の途中の言葉だけを大きくすると、行の高さがそろわずに読みにくくなりやすいからです。
• Q. 字間や行間は、ちょうどよい数値を覚えればよい?
  A. 目安の数値はありますが、同じ数値でも書体や文字の大きさによって見え方が変わります。
  数値は出発点にして、最後は実際に表示して「まとまって読めるか」「次の行に自然に目が移るか」を目で確かめましょう。

まとめ

文字の見え方は、サイズ・太さ・間隔(字間と行間)の3つでほぼ決まり、サイズは読む順番、太さは強さと印象、字間は言葉のまとまり、行間は読み進めやすさを変えます。

3つは互いに影響し合うので、1つを変えたらほかの2つも釣り合っているかを見直すことが大切です。

まずは今日目にしたWebサイトかチラシを1つ選び、「一番大きい文字」「太字の場所」「見出しの字間」の3つだけを確かめてみてください。