2025.04.11

脱初心者!? 文字組の基礎を解説!【カーニングマスター】 Part1 

「カーニング」について、みなさんは説明できますでしょうか?

知らない方はもちろんのこと、知っている人でも

「なんとなくは理解しているけど、いざ説明しようとすると難しい…。」

そんな人も多いと思います。

カーニングを知らないビギナーデザイナーも、後輩に教えたい先輩デザイナーも改めて振り返りましょう!

1.そもそも「カーニング」とは?

こちらは特に何も考えず、打った文字です。ベタ打ちと言ったりもします。

何の変哲もないですが、よく見ると…

なんと!文字同士の距離がバラバラです!
そう言われると、なんだかバランスが悪いですよね。

「カーニング」とは、そんなバラバラの文字と文字の間隔を、調整することです!
実際に例を見てみましょう。

2.カーニング あり・なし比較

上段が、先ほど見た文字同士の間隔がバラバラの状態。
下段が、カーニングを設定したものです。


下段の特徴

  • 「イ」 と 「ン」の間が広すぎない

  • 「ベン」 と 「キョウ」の間が少し広い

  • 全体的に文字の間隔が均一で


3.文字ごとに間隔が違う理由 ~ボディ~

そもそもなぜ文字同士の間隔がバラバラなのでしょうか。

その理由は、文字には「ボディ」があるからです。

ボディとは

文字にはひとつひとつ、実は見えない透明のボックスが存在します。
そのボックスを「仮想ボディ」と言います。

この仮想ボディ内で 「り」 は文字自体の形が細いので、オレンジの丸くらい隙間が空いています。

そしてテキストは特に調整せずベタ打ちすると、仮想ボディにあわせてブロックのように並びます。

なので、文字自体の形が太いか細いか、先ほどの太い「あ」か細い「り」かで、文字同士の間隔が変わってしまいます。

このバラつきを、カーニングで整える必要があります。

【豆知識】なぜボディは存在するのか

なぜ仮想ボディなんてものが存在するのか。実は活字印刷のなごりなんです。

15世紀頃の日本では金属活字での印刷が主流でした。

活字は判子と似ていて、文字を反転してつくられおり、活字を原稿に沿って組み合わせ、インクをつけ、印刷していました。

金属活字の外側をボディ、そのさらに内側の文字が実際に収まる四角を字面と呼びます。
この2つの要素で文字は成り立っており、それがデジタルになっても残っているから仮想ボディが存在するんですね。

ちなみに活字印刷は金属の「ボディ」があったのに対し、デジタルは実態のボディがないので「仮想ボディ」と呼び分けています。

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

カーニングについては理解できたかと思います。
しかし!混同されやすい似たような言葉、トラッキングがあります。
この2つは何が違うのでしょうか?

カーニング

単体の文字間での間隔を調整する

こちらは手動で文字間隔を調整しております。

頭のKは、カーニングの値が60に設定してあります。
そして後ろのNの所は、カーニングの値が40に設定してあります。

このように、各文字ごとに間隔を調整できるのが「カーニング」です。

トラッキング

テキスト全体(または指定した範囲)の余白を調整すること

「TRACKING」が2つ並んでおります。

トラッキングはテキスト全体の文字間を調整してくれる機能です。


左:文字同士の間隔が広い
右:ギュッとしている


トラッキングの数値が大きいほど、間隔が広くなります。

2つを併用した例

カーニング・トラキングの2つを併用することで、きれいな文字組が完成します。


  1. デザインの雰囲気に合わせた文字間隔をトラッキングで設定。

  2. 特定の文字と文字の間隔が狭すぎる、または広すぎる時にカーニング個別に調整してあげる。


トラッキングの数値を大きく設定すると、どこの文字が詰まりすぎているかがわかりにくいときもあります。

そんな時は一度トラッキングを小さくするとわかりやすいです。

まとめ


  1. カーニングとは文字と文字の間隔を整えること

  2. 文字には仮想ボディがあるからカーニングが必要

  3. カーニングは単体の文字間を、トラッキングは全体の文字間を調整する


カーニングやトラッキングを理解して、きれいな文字組をしましょう!

パート2もぜひぜひ ↓

メトリクスとオプティカルってどっち使うの!?【カーニングマスター】 Part2

https://service.gigno.co.jp/blog/14-2

 この記事を書いた人

まそ

将来はパンになりたい子にハマってます。

すべての投稿を確認する

デザインのお悩み、
私たちにお任せください

ジグノシステムジャパンでは、デザインだけでなく、システム構築、メタバース、XRAR、3D豊富な経験からお客様のお悩みを解決いたします

CONTACT

share

知ると誰かに話したくなる!身近なモノの「なんで?」をデザイン視点で解き明かす!

2026.10.07

身近な話題から考える「言葉」と「行動」が持つ意味~アプグレってどういう意味?~

2026.10.01

【Adobe Premiere 26.5】新機能「 生成メディアツール」で効果音が作れるようになったので触ってみる

2026.09.24

WEB・グラフィックデザイナーは試す価値あり!「印刷用ルーペ」でグラフィック表現の解像度を上げよう

2026.09.02