Kerning vs Tracking: Understanding the Core Difference
If you have ever worked on a logo, a headline, or even a simple flyer, you have probably come across two terms that sound almost interchangeable: kerning and tracking. They both deal with the horizontal spacing between letters, yet they serve very different purposes. Confusing them can lead to awkward text, poor readability, and designs that feel “off” without anyone being able to pinpoint why.
In this guide, we will break down the difference between kerning and tracking, show you practical examples for print and digital projects, and give you clear rules for when to use each one.
Quick Definition: Kerning and Tracking at a Glance
| Term | What It Adjusts | Scope | Primary Use |
|---|---|---|---|
| Kerning | Space between two specific letters | Individual letter pairs | Fine-tuning headlines, logos, display type |
| Tracking | Space across an entire block of text | All characters uniformly | Setting overall text density, improving readability |
Think of it this way: kerning is a scalpel; tracking is a paintbrush. One makes precise, surgical corrections between two characters. The other paints a consistent spacing change across every letter in a word, sentence, or paragraph.
What Is Kerning?
Kerning is the process of adjusting the space between two individual letters to make them look visually balanced. Fonts come with built-in kerning tables that handle most common letter pairs automatically, but certain combinations still need manual adjustment, especially at large sizes.
Why Does Kerning Exist?
Letters are not perfect rectangles. Each character has a unique shape, and when two shapes sit next to each other, the white space between them can look uneven even if the actual measurements are identical. Kerning compensates for these optical illusions.
Classic Letter Pairs That Need Kerning
- AV and AW – the diagonal strokes create a wide visual gap at the top
- To and Ty – the capital T overhang leaves empty space next to the lowercase letter
- WA and VA – similar diagonal-stroke issues as AV
- LT and LY – the open right side of the L creates excessive space
- oc and ce – rounded forms can appear too tight or too loose depending on the typeface
When to Adjust Kerning
- Logo design – every letter pair in a wordmark must be optically perfect
- Headlines and display type – large text amplifies spacing inconsistencies
- Title slides and hero banners – any awkward gap is immediately noticeable on screen
- Monograms and short abbreviations – with only a few characters, every pair matters
You generally do not need to manually kern body text. At small sizes, built-in font metrics handle the job well enough, and the human eye is far less sensitive to pair-level differences in running text.
What Is Tracking?
Tracking (sometimes called letter-spacing in CSS) adjusts the spacing uniformly across all characters in a selected range. When you increase tracking, every letter moves further apart by the same amount. When you decrease it, every letter moves closer together.
When to Adjust Tracking
- All-caps text – uppercase letters almost always benefit from increased tracking because they were originally designed to pair with lowercase forms
- Small text and captions – slightly looser tracking improves legibility at small sizes
- Large display text – tighter tracking can make oversized headlines feel more cohesive
- Fitting text into a fixed space – subtle tracking adjustments help you avoid widows or overflow without changing the font size
- Stylistic choices – loose tracking on subheadings or navigation labels is a popular modern design trend
Kerning vs Tracking: A Side-by-Side Comparison
| Criteria | Kerning | Tracking |
|---|---|---|
| Scope of change | Two adjacent characters | Entire word, line, or paragraph |
| Goal | Optical balance between a pair | Overall text density and tone |
| When applied | After tracking is set | Before kerning fine-tuning |
| Common tools | InDesign, Illustrator, Figma (manual kerning) | InDesign, Illustrator, Figma, CSS letter-spacing |
| Typical use case | Logos, headlines, wordmarks | Body text, all-caps headings, navigation |
| Automation | Partially (metrics and optical kerning) | Fully manual or via style sheets |
How Kerning and Tracking Work Together
A common mistake is treating kerning and tracking as an either/or decision. In practice, professional designers use them together in a specific order:
- Choose the typeface and size.
- Set the tracking to establish the overall density of the text.
- Fine-tune kerning on individual letter pairs that still look unbalanced.
If you kern first and then change the tracking, your kerning adjustments will be affected because tracking adds or removes space uniformly. Always set your global spacing first, then refine the details.
Practical Examples: Print vs Digital
Print Example: Magazine Cover Headline
Imagine a magazine cover with the headline “TRAVEL” set in bold uppercase at 72pt.
- Step 1 (Tracking): Increase tracking by +50 to +100 units so the uppercase letters breathe and do not feel cramped.
- Step 2 (Kerning): Manually tighten the space between the T and R, because the overhang of the T creates an optical gap. Also check the A and V pair, which tends to look too wide.
Digital Example: Website Navigation Bar
A navigation bar with menu items like “ABOUT,” “SERVICES,” “CONTACT” in small uppercase text at 12px.
- Step 1 (Tracking via CSS): Apply
letter-spacing: 0.1em;to give the small caps a clean, modern feel. - Step 2 (Kerning): In most web scenarios, you rely on the font’s built-in kerning (
font-kerning: normal;). Manual kerning of individual pairs is rarely practical in HTML/CSS, which is why choosing a well-kerned font matters so much for web projects.
Logo Example: Wordmark for a Brand
When designing a wordmark in Illustrator or Figma:
- Step 1 (Tracking): Set the tracking to get the general feel right. A luxury brand might use loose tracking for elegance; a tech brand might use tighter tracking for a modern, compact look.
- Step 2 (Kerning): Go pair by pair. Place your cursor between each set of two letters and adjust until the white space between every pair feels visually equal.
- Pro tip: Squint your eyes or flip the text upside down. Both tricks help you see the spacing patterns without being distracted by the letterforms themselves.
Where to Adjust Kerning and Tracking in Popular Tools
| Tool | Kerning | Tracking |
|---|---|---|
| Adobe InDesign | Character panel > Kerning field (place cursor between two letters) | Character panel > Tracking field (select the text range) |
| Adobe Illustrator | Character panel > Kerning or Alt/Option + arrow keys between two letters | Character panel > Tracking or select all text and adjust |
| Figma | Place cursor between letters > adjust Letter Spacing value | Select text > Letter Spacing in the Design panel |
| CSS (Web) | font-kerning: normal | none (relies on font tables) |
letter-spacing: 0.05em; (applied to selected elements) |
Common Mistakes to Avoid
- Over-kerning: Pushing letters so close together that they overlap or become hard to read. Always prioritize legibility over aesthetics.
- Ignoring tracking on all-caps text: Uppercase letters set without any tracking adjustments almost always look too tight.
- Using tracking to fix kerning problems: If one specific pair looks wrong, changing the tracking of the whole word will not fix the problem and will likely create new ones.
- Forgetting about different sizes: Text that looks great at 14px might need different tracking at 60px. Always review spacing at the actual output size.
- Relying only on auto-kerning: Built-in metrics kerning is a good starting point, but it is not perfect for every combination, especially in display type.
Bonus: What About Leading?
You will often see leading mentioned alongside kerning and tracking. Leading refers to the vertical space between lines of text (line-height in CSS). While kerning and tracking deal with horizontal spacing, leading handles the vertical dimension. All three work together to create comfortable, readable typography.
| Property | Direction | What It Controls |
|---|---|---|
| Kerning | Horizontal | Space between two specific letters |
| Tracking | Horizontal | Space across all letters in a selection |
| Leading | Vertical | Space between lines of text |
Frequently Asked Questions
What is the main difference between tracking and kerning?
Kerning adjusts the space between two specific adjacent letters to correct optical imbalances. Tracking adjusts the spacing uniformly across an entire group of characters, whether that is a word, a sentence, or a full paragraph. Kerning is precise and pair-specific; tracking is broad and uniform.
Should I kern body text?
In most cases, no. Body text is small enough that built-in font kerning handles the job adequately. Focus your manual kerning efforts on headlines, logos, and any text displayed at large sizes where spacing inconsistencies become visible.
What is the correct order: kerning first or tracking first?
Always set tracking first. Tracking changes the spacing of every character uniformly, which means any kerning adjustments you made before will be shifted. Set your overall letter-spacing with tracking, then refine individual pairs with kerning.
How do I adjust kerning and tracking in CSS for websites?
In CSS, use letter-spacing to control tracking (e.g., letter-spacing: 0.05em;). For kerning, use font-kerning: normal; to enable the font’s built-in kerning pairs. Manual per-pair kerning is not natively supported in CSS.
Does tracking affect kerning?
Yes. When you change tracking, the spacing added or removed is applied on top of existing kerning values. That is why it is important to establish tracking first and then adjust kerning afterward.
What are the five main rules of typography?
While different designers have their own frameworks, five widely accepted rules include:
- Choose typefaces with purpose and readability in mind.
- Establish a clear visual hierarchy using size, weight, and spacing.
- Set appropriate line length (45 to 75 characters per line for body text).
- Adjust leading, tracking, and kerning for comfortable reading.
- Maintain consistency across your entire design or brand system.
Is tracking the same as letter-spacing?
Functionally, yes. “Tracking” is the term used in design applications like InDesign and Illustrator. “Letter-spacing” is the equivalent CSS property used in web development. Both refer to the uniform adjustment of space across multiple characters.
Final Thoughts
Understanding the difference between kerning and tracking is one of those small details that separates good design from great design. Kerning gives you surgical control over individual letter pairs, while tracking lets you shape the overall rhythm and density of your text. Use them together, in the right order, and your typography will look polished, intentional, and professional in every medium.
If you need help with typography, branding, or any aspect of your print and digital design projects, the team at ABCI Marketing is here to help. Reach out to us and let us make your next project look its best.
