Kerning vs Tracking vs Leading: What Every Designer Needs to Know
If you have ever stared at a block of text and felt like something was “off” but could not pinpoint the issue, chances are the problem was related to spacing. More specifically, it was related to kerning, tracking, or leading.
These three typography spacing concepts are the backbone of readable, professional design. Yet they remain some of the most confused and misunderstood terms among beginners and even intermediate designers.
In this guide, we break down the difference between kerning, tracking, and leading in plain language. We will show you what each one controls, when to adjust it, and how to use all three together to create text that looks and feels polished.
Quick Overview: Kerning, Tracking, and Leading at a Glance
Before we dive into details, here is a side-by-side comparison to set the stage:
| Term | What It Controls | Scope | Direction |
|---|---|---|---|
| Kerning | Space between two specific characters | Individual letter pairs | Horizontal |
| Tracking | Uniform spacing across a range of characters | Entire word, line, or block of text | Horizontal |
| Leading | Vertical space between lines of text | Entire paragraph or text block | Vertical |
Now let us explore each one in depth.
What Is Kerning in Typography?
Kerning is the process of adjusting the space between two specific characters. It is the most granular of the three spacing controls. Think of it as fine-tuning individual letter pairs so they appear visually balanced.
Why Kerning Matters
Not all letter combinations sit naturally next to each other. Because of the unique shapes of different characters, some pairs create awkward gaps or feel too tight when placed side by side.
Classic examples of letter pairs that often need kerning adjustments include:
- AV or VA (the angled strokes create a visible gap)
- To (the crossbar of the T creates space above the o)
- WA or AW
- Ty, Yo, We
Without proper kerning, headlines and logos can look unpolished, even if the font itself is beautiful.
When to Adjust Kerning
- Logo design: Every character in a logo should be manually kerned for visual perfection.
- Headlines and titles: Large text amplifies spacing issues that are invisible at small sizes.
- Display type on posters and banners: Any text meant to grab attention deserves kerning attention.
Pro tip: Most professional fonts come with built-in kerning tables (called “metrics kerning”). In tools like Adobe Illustrator or InDesign, you can choose between Metrics, Optical, or Manual kerning. For body text, the default metrics setting usually works fine. For headlines, switch to optical or adjust manually.
What Is Tracking in Typography?
Tracking (sometimes called letter-spacing in CSS and web design) controls the uniform spacing across an entire range of characters. Unlike kerning, which targets individual pairs, tracking applies the same amount of spacing increase or decrease to every character in the selected text.
Tracking vs Kerning: The Key Difference
This is where many beginners get confused. Here is the simplest way to remember it:
- Kerning = adjusting the space between two specific letters
- Tracking = adjusting the space between all letters equally
Imagine you have the word “DESIGN.” With kerning, you might tighten just the space between the D and E. With tracking, you would increase or decrease the spacing between every letter in the word by the same amount.
When to Adjust Tracking
- Uppercase text: All-caps words often benefit from increased tracking to improve readability.
- Small text and captions: A slight increase in tracking can make tiny text easier to read.
- Stylistic choices: Loose tracking can create an elegant, airy feel. Tight tracking can convey density and urgency.
- Fitting text into a space: Adjusting tracking helps you control how much horizontal room a block of text occupies.
Common Tracking Mistakes to Avoid
- Do not use extreme negative tracking on body text. It makes words unreadable.
- Avoid excessive positive tracking on lowercase body copy. It disrupts word shapes and slows reading speed.
- Never use tracking as a substitute for proper kerning. Fix individual pairs first, then adjust tracking globally if needed.
What Is Leading in Typography?
Leading (pronounced “ledding”) controls the vertical space between lines of text. The term comes from the days of manual typesetting, when strips of lead metal were placed between rows of type to create line spacing.
In modern design software, leading is often labeled as “line spacing” or “line height.” In CSS, it corresponds to the line-height property.
How Leading Affects Readability
Leading has a massive impact on how comfortable a block of text is to read:
- Too tight: Lines of text overlap or feel cramped, making readers lose their place.
- Too loose: Excessive vertical space breaks the visual connection between lines, making the text feel disconnected.
- Just right: Proper leading guides the eye smoothly from the end of one line to the beginning of the next.
Leading Guidelines
| Use Case | Recommended Leading |
|---|---|
| Body text (print) | 120% to 145% of the font size |
| Body text (web/screen) | 140% to 160% of the font size |
| Headlines and display text | 100% to 120% of the font size |
| Captions and small text | 130% to 150% of the font size |
For example, if your body text is set at 16px, a line-height between 22px and 26px (roughly 140% to 160%) will provide comfortable reading on screen.
How Kerning, Tracking, and Leading Work Together
Great typography is never about adjusting just one of these values in isolation. All three work as a team. Here is a practical workflow you can follow:
- Set your leading first. Choose a comfortable line-height for your text block. This establishes the overall vertical rhythm of your design.
- Adjust tracking next. Fine-tune the global letter-spacing for the text style. This is especially important for headings, all-caps labels, and small-sized text.
- Refine kerning last. Go through your headlines and display text to fix any awkward letter pairs. Body text at small sizes rarely needs manual kerning.
Think of it as working from the macro level (leading) to the micro level (kerning).
Kerning vs Tracking vs Leading in Popular Design Tools
Here is where you will find each setting in the most commonly used design applications:
| Tool | Kerning | Tracking | Leading |
|---|---|---|---|
| Adobe InDesign | Character panel (VA icon) | Character panel (VA with arrows) | Character panel (line spacing icon) |
| Adobe Illustrator | Character panel | Character panel | Character panel |
| Figma | Not natively supported (manual workaround) | Letter spacing field | Line height field |
| Photoshop | Character panel | Character panel | Character panel |
| CSS (Web) | Not directly available | letter-spacing |
line-height |
Note: In CSS, there is no direct equivalent of kerning. However, the font-kerning property can enable or disable the font’s built-in kerning tables. Most modern browsers enable it by default.
Is Kerning Still Relevant in Web Design?
Absolutely. While web designers have less direct control over kerning compared to print designers, it still matters. Here is why:
- Modern OpenType fonts include built-in kerning data that browsers can use.
- For hero sections, landing page headlines, and brand names, poor kerning is immediately visible.
- Tools like Figma and Adobe XD allow designers to adjust spacing at the prototype stage, ensuring that developers implement the correct values.
If you are designing for the web in 2026 and beyond, make sure your CSS includes font-kerning: auto; or font-feature-settings: "kern"; to take advantage of built-in kerning pairs.
Practical Examples: Before and After
Let us walk through a few common scenarios where adjusting kerning, tracking, or leading transforms the result.
Example 1: A Logo with Poor Kerning
Imagine the word “TAVERN” in a bold sans-serif font. Without kerning adjustments, the space between the T and A appears much wider than the space between A and V. The fix: manually tighten the T-A pair until the optical spacing feels even.
Example 2: An All-Caps Subheading with Default Tracking
A subheading like “OUR SERVICES” in all caps at 14px often looks cramped with default letter-spacing. Increasing tracking by 50 to 100 units (or 0.05em to 0.1em in CSS) opens the text up and gives it a refined, editorial feel.
Example 3: A Blog Post with Tight Leading
Body text at 16px with a line-height of 18px (112%) feels suffocating. Readers lose their place between lines. Increasing leading to 26px (162%) immediately improves readability and creates a comfortable reading experience.
Common Mistakes Designers Make with Typography Spacing
Avoid these pitfalls as you fine-tune your type:
- Ignoring kerning on headlines. Auto-kerning works for body text, but headlines at large sizes expose every spacing flaw.
- Using the same tracking for uppercase and lowercase. All-caps text almost always needs more tracking than mixed-case text.
- Setting leading too tight for long-form reading. What looks fine on a three-word headline becomes exhausting over a full paragraph.
- Confusing kerning with tracking. Applying tracking when you should be kerning (or vice versa) leads to inconsistent results.
- Forgetting to test on multiple devices. Spacing that looks great on a large desktop monitor may feel very different on a mobile screen.
Frequently Asked Questions
What are the 4 types of typography?
The four main types (or classifications) of typography are serif, sans-serif, script, and display (sometimes called decorative). Each category has distinct characteristics and is suited to different design contexts.
What are the five main rules of typography?
While rules can vary by source, five widely accepted principles are:
- Choose fonts with purpose and hierarchy.
- Maintain consistent spacing (kerning, tracking, and leading).
- Limit the number of typefaces in a single design (usually two or three).
- Ensure strong contrast between text and background.
- Prioritize readability over decoration.
Is leading the same as line spacing?
In practice, yes. Leading is the traditional typographic term for the vertical distance between lines of text. In digital design tools and CSS, it is commonly referred to as “line spacing” or “line-height.” They describe the same concept.
Is kerning still relevant in web design?
Yes. Modern browsers support OpenType kerning features, and most professional web fonts include kerning tables. For large display text on websites, proper kerning is essential. The CSS property font-kerning: auto; enables the font’s built-in kerning pairs.
What is the difference between kerning and tracking?
Kerning adjusts the space between two specific characters (a single pair). Tracking adjusts the spacing uniformly across all characters in a selected range of text. Kerning is a precision tool; tracking is a global adjustment.
Should I adjust kerning on body text?
Generally, no. At small sizes (under 18px or so), the human eye cannot detect minor kerning imperfections. Focus your kerning efforts on headlines, titles, logos, and any text that appears at large sizes. Let the font’s built-in metrics handle body text.
Final Thoughts
Understanding the difference between kerning, tracking, and leading is one of the most important steps in becoming a stronger designer. These three controls may seem subtle, but they are the difference between type that feels amateur and type that feels intentional.
Start by getting your leading right for comfortable reading. Then adjust tracking to set the overall tone and density. Finally, polish your headlines with precise kerning. Master this workflow and your typography will speak volumes, even before anyone reads a single word.
At AHT Design, typography spacing is a core part of every project we deliver. Whether we are crafting a brand identity, designing a website, or building a complete visual system, we obsess over these details so your audience enjoys a seamless reading experience.
