Kerning vs Tracking vs Leading: Understanding the Three Core Spacing Terms in Typography
If you have ever tried to fine-tune the look of your text, you have probably run into three terms that seem frustratingly similar: kerning, tracking, and leading.
They all deal with spacing. They all affect readability. And they are constantly confused with each other.
This guide will break down exactly what each term means, show you how adjusting them changes the appearance of text, and help you understand when and why you should use each one. Whether you are a graphic designer, a web developer, or someone building a brand with tools like Photosheep, understanding these three concepts will immediately improve your typography skills.
Quick Overview: Kerning, Tracking, and Leading at a Glance
| Term | What It Controls | Direction | Scope |
|---|---|---|---|
| Kerning | Space between two specific characters | Horizontal | Individual letter pairs |
| Tracking | Space across an entire word or block of text | Horizontal | All characters uniformly |
| Leading | Space between lines of text | Vertical | Line-to-line distance |
That is the simple version. Now let’s dig into each one in detail.
What Is Kerning?
Kerning is the adjustment of space between two specific characters. It is the most precise of the three spacing controls because it targets individual letter pairs rather than entire words or paragraphs.
Why Kerning Exists
Not all letter shapes fit together naturally. Some combinations create awkward visual gaps even when the letters are technically evenly spaced. Common problematic pairs include:
- AV – the diagonal strokes create a wide visual gap
- To – the T’s crossbar leaves open space above the lowercase o
- WA – similar to AV, diagonals cause uneven spacing
- LT – the open right side of the L combined with the T’s vertical stroke
- Yo – the Y’s arms leave a gap above the o
Without kerning adjustments, these pairs look further apart than the rest of the letters around them, making the word feel broken or unbalanced.
How Kerning Works in Practice
Most professional fonts include built-in kerning tables that automatically adjust hundreds of letter pair combinations. Design software like Adobe Illustrator, Photoshop, Figma, and InDesign will apply these by default (often labeled as “Metrics” or “Optical” kerning).
However, you can also manually kern specific pairs when the automatic settings do not look right, especially in large display text like headlines and logos.
When to Adjust Kerning
- Logo design and brand wordmarks
- Headlines and hero text on websites
- Poster and banner typography
- Any large-scale text where spacing inconsistencies are visually obvious
Pro tip: Kerning issues are much more noticeable at large sizes. Body text at 14px or 16px rarely needs manual kerning because the eye does not catch small inconsistencies at that scale.
What Is Tracking?
Tracking (sometimes called letter-spacing in CSS and web design) is the uniform adjustment of spacing across all characters in a word, sentence, or block of text. Unlike kerning, which targets specific pairs, tracking applies the same amount of space increase or decrease to every character equally.
How Tracking Differs from Kerning
This is where most people get confused. Here is the key distinction:
- Kerning = adjusting the space between letter A and letter B specifically
- Tracking = adjusting the space between every letter in a selected range by the same amount
Think of it this way: kerning is a scalpel, tracking is a slider. Kerning makes surgical corrections. Tracking makes broad adjustments.
What Happens When You Change Tracking
| Tracking Value | Visual Effect | Common Use |
|---|---|---|
| Tight (negative) | Letters move closer together | Bold headlines, compact display text |
| Normal (0) | Default font spacing | Body text, general reading |
| Loose (positive) | Letters spread further apart | Uppercase headings, elegant branding, small caps |
When to Adjust Tracking
- All-caps text: Uppercase letters almost always benefit from slightly increased tracking because capital letters are designed to begin words, not sit side by side continuously
- Small text: Slightly looser tracking can improve readability at very small sizes
- Stylistic choices: Luxury brands and editorial layouts often use wide tracking for an airy, elegant feel
- Fitting text into a space: Slight tracking adjustments can help text fit a fixed-width container without changing font size
Tracking in CSS
If you work on the web, tracking is controlled with the letter-spacing property. For example:
letter-spacing: 0.05em;
This adds a small amount of space between every character in the selected element.
What Is Leading?
Leading (pronounced “ledding”) controls the vertical distance between lines of text. The name comes from the days of metal typesetting when printers placed thin strips of lead between rows of type to increase line spacing.
In modern design tools, leading is simply called line spacing or line height.
How Leading Affects Readability
Leading is arguably the most impactful of the three adjustments when it comes to readability, especially for body text and long-form content. Here is why:
- Too tight: Lines of text overlap or feel cramped, making it hard for the eye to track from the end of one line to the beginning of the next
- Too loose: Lines feel disconnected from each other, and the reader loses the sense of paragraph cohesion
- Just right: The eye can comfortably move from one line to the next without losing its place
Common Leading Values
A widely accepted rule of thumb is to set leading at 120% to 145% of the font size. So for a 16px font, a line height between 19px and 23px is usually comfortable for reading.
| Content Type | Recommended Leading |
|---|---|
| Body text (paragraphs) | 140% to 145% of font size |
| Headlines | 100% to 120% of font size |
| Captions and small text | 130% to 140% of font size |
| Display/decorative text | 90% to 110% of font size |
Leading in CSS
On the web, leading is controlled with the line-height property:
line-height: 1.5;
This sets line height to 1.5 times the font size, which is a good starting point for body text.
Kerning vs Tracking vs Leading: A Side-by-Side Comparison
Let’s put all three together one more time with a deeper comparison.
| Feature | Kerning | Tracking | Leading |
|---|---|---|---|
| Direction | Horizontal | Horizontal | Vertical |
| Scope | Between two characters | Across all characters | Between lines |
| Purpose | Fix awkward gaps between specific letter pairs | Set overall text density and feel | Control vertical rhythm and line readability |
| When it matters most | Large text, logos, headlines | All-caps text, stylistic layouts, small text | Body text, articles, any multi-line content |
| CSS equivalent | No direct CSS property (handled by font files) | letter-spacing | line-height |
| Design tool control | Metrics, Optical, or Manual | Tracking slider or numeric input | Line spacing or leading input |
How to Apply Kerning, Tracking, and Leading: The Right Order
Professional typographers follow a specific sequence when adjusting text spacing. Getting the order wrong can mean redoing work, because changing one setting often affects how the others look.
- Set your leading first. Establish the vertical rhythm of your text. Get the line spacing comfortable for the content type (body, headline, caption, etc.).
- Adjust tracking second. Decide on the overall character spacing for the block of text. This is especially important for uppercase text or stylized sections.
- Fine-tune kerning last. Once the overall spacing is set, zoom in and check specific letter pairs. Adjust any pairs that look visually unbalanced.
Following this order saves time and produces more consistent results.
Common Mistakes to Avoid
Even experienced designers sometimes make these errors:
- Using tracking to fix a kerning problem. If two specific letters look wrong, adjusting tracking will move every letter and may make other pairs worse. Use kerning instead.
- Ignoring leading in body text. Tight leading is one of the fastest ways to make a website or document feel unreadable. Always check your line height.
- Over-kerning. When letters are manually kerned too tightly, they can overlap or feel squished. Step back and view the text at actual size before committing.
- Applying the same tracking to uppercase and lowercase. Uppercase text usually needs more tracking than lowercase. Using the same value for both can make one look great and the other look off.
- Forgetting about responsive behavior. On the web, text reflows at different screen sizes. A leading or tracking value that works on desktop may not work on mobile. Always test across devices.
Is Kerning Still Relevant in Web Design?
Yes, absolutely. While CSS does not offer a direct kerning property the way design tools like Photoshop or Illustrator do, modern web fonts include built-in kerning data. Browsers apply this kerning through the font-kerning CSS property, which is enabled by default in most browsers.
You can explicitly control it:
font-kerning: auto; (default, lets the browser decide)
font-kerning: normal; (enables kerning from the font file)
font-kerning: none; (disables kerning entirely)
For more advanced OpenType features, you can use font-feature-settings to toggle specific kerning tables. But for most websites, the default behavior works well as long as you are using a quality font.
Tools Where You Can Adjust Kerning, Tracking, and Leading
| Tool | Kerning | Tracking | Leading |
|---|---|---|---|
| Adobe Photoshop | Character panel | Character panel | Character panel |
| Adobe Illustrator | Character panel | Character panel | Character panel |
| Adobe InDesign | Character panel | Character panel | Character panel |
| Figma | Design panel (between cursor) | Letter spacing field | Line height field |
| Canva | Limited | Letter spacing slider | Line spacing slider |
| CSS (web) | font-kerning property | letter-spacing property | line-height property |
Practical Examples: How Each Adjustment Changes Text
Example 1: Kerning a Logo
Imagine you are designing a logo with the word “TAVERN.” The letter pair “TA” will naturally have a large visual gap because the A tucks under the T’s crossbar. Without manual kerning, it might read as “T AVERN” instead of “TAVERN.” By reducing the kern value between T and A, you close that gap and the word looks unified.
Example 2: Tracking on an Uppercase Heading
Consider the heading “NEW ARRIVALS” set in all caps. With default tracking (0), the letters may feel cramped. Adding 50 to 100 units of tracking (or 0.05em to 0.1em in CSS) spreads the letters out slightly, giving the heading a more polished, breathable appearance.
Example 3: Leading in a Blog Article
A paragraph set in 16px font with a line height of 16px (100%) will feel extremely tight, with ascenders and descenders from adjacent lines nearly touching. Increase the line height to 24px (150%) and the same paragraph becomes comfortable, easy to scan, and inviting to read.
FAQ: Kerning, Tracking, and Leading
Is leading the same as line spacing?
In modern design, yes. The terms are used interchangeably. “Leading” is the traditional typographic term, while “line spacing” or “line height” are the terms used in most digital tools and CSS.
What are the 4 types of typography spacing?
The four main types of spacing in typography are kerning (space between two letters), tracking (uniform space across all letters), leading (vertical space between lines), and word spacing (space between individual words). Kerning, tracking, and leading are the three most commonly discussed and adjusted.
Can I control kerning in CSS?
You can enable or disable the font’s built-in kerning data using the font-kerning CSS property. However, CSS does not allow you to kern individual letter pairs manually the way design software does. For fine control over specific pairs, you would need to use a design tool or SVG text.
What is the difference between kerning and tracking?
Kerning adjusts the space between two specific adjacent characters. Tracking adjusts the space between all characters in a selected range uniformly. Kerning is surgical, tracking is global.
What is a good line height for web body text?
A line height of 1.4 to 1.6 (140% to 160% of the font size) works well for most body text on the web. The exact value depends on the font, font size, and line length. Longer lines generally need slightly more leading.
Should I adjust kerning for body text?
In most cases, no. Modern fonts have well-designed kerning tables that handle body text automatically. Manual kerning is mainly useful for display text, headlines, logos, and any text set at large sizes where spacing inconsistencies become visible.
What happens if I use too much tracking?
Excessive tracking makes words difficult to read because the letters no longer feel connected as a unit. The eye has to work harder to group letters into words, which slows reading speed and reduces comprehension. Use subtle adjustments and always test readability.
Final Thoughts
Understanding the difference between kerning, tracking, and leading is one of those foundational typography skills that separates polished design from amateur work. Each one controls a different dimension of text spacing, and knowing when to use each is key.
- Kerning fixes individual letter pair gaps
- Tracking sets the overall tone and density of your text
- Leading ensures your lines of text are comfortable to read
Master all three, and your text will not only look better but will communicate more effectively. And that is what good typography is really about.