Kerning vs Tracking vs Leading: The Real Difference Explained (With Visual Examples)
If you’ve ever opened Figma, Photoshop, or InDesign and wondered why your text looks off but you can’t pinpoint why, you’re not alone. Most self-taught designers mix up kerning, tracking, and leading at least once a week. They sound similar, they all deal with spacing, and tutorials rarely explain them side by side.
At Joxa Design, we audit dozens of brand identities and marketing assets every month, and bad spacing is by far the most common typography mistake we see. So let’s settle the difference between kerning and tracking (and leading) once and for all.
The Short Answer (For People in a Hurry)
- Kerning = space between two specific letters
- Tracking = space across a group of letters (word, line, paragraph)
- Leading = vertical space between lines of text
That’s it. If you remember just those three lines, you’re already ahead of 80% of junior designers. But the nuance is where good typography actually lives, so let’s dig in.
What Is Kerning?
Kerning is the adjustment of space between two individual characters. It’s surgical. You’re zooming in on one letter pair (like “A” and “V”, or “T” and “o”) and deciding how much air should sit between them.
Why does this matter? Because letters have different shapes. A capital “A” leans inward, a “V” leans outward, and when they sit next to each other with default spacing, they often look like they’re drifting apart. Kerning closes that visual gap so the word reads as one unit instead of disconnected shapes.
When You Should Kern
- Logos and wordmarks (always)
- Large display headlines
- Posters, packaging, anything seen up close
- Custom typography work
When You Shouldn’t Stress About Kerning
- Body text at 14 16px (the font designer already handled it)
- UI labels and form fields
- Long paragraphs where manual kerning would take forever
What Is Tracking?
Tracking adjusts spacing uniformly across a group of letters. Instead of picking one letter pair, you’re saying “add or remove this much space to every letter in this word, line, or paragraph.”
Think of it as the global setting. Loose tracking gives text an airy, premium feel (perfect for fashion brands or minimalist headlines). Tight tracking pulls letters together for a denser, more compact look.
Common Tracking Use Cases
- All caps headings: capital letters almost always need extra tracking to breathe
- Small text on dark backgrounds: a tiny bit of positive tracking improves legibility
- Editorial and luxury branding: wide tracking signals elegance
- Mobile UI: slightly negative tracking on large headlines saves screen space
What Is Leading?
Leading (pronounced “ledding”, from the old days when typesetters put strips of lead between rows of metal type) is the vertical space between lines of text. In CSS, you know it as line-height.
Leading is the single biggest factor in whether a paragraph feels readable or exhausting. Too tight and lines crash into each other. Too loose and the eye loses track of where the next line starts.
Quick Leading Guidelines
- Body text: 1.4 to 1.6 times the font size
- Headlines: 1.1 to 1.25 (tighter, because they’re short)
- Long-form articles: lean towards 1.6 1.7 for comfort
- All caps: can go a bit tighter since there are no descenders
Kerning vs Tracking vs Leading: Side by Side
| Term | What it adjusts | Scope | Direction | Best for |
|---|---|---|---|---|
| Kerning | Space between 2 specific letters | Letter pair | Horizontal | Logos, headlines, display type |
| Tracking | Uniform space across many letters | Word, line, paragraph | Horizontal | All caps, mood, density |
| Leading | Space between lines | Paragraph, block | Vertical | Body copy, readability |
A Simple Mental Model to Stop Confusing Them
Here’s the trick we teach junior designers at Joxa:
- Kerning starts with a K, like “Kouple” (two letters)
- Tracking starts with a T, like “Tons of letters” (groups)
- Leading starts with an L, like “Lines” (vertical)
Silly, but it works.
Real World Workflow: In What Order Should You Adjust Them?
Professional typesetters follow a specific order, and it’s the opposite of what most beginners do:
- Pick the typeface and size first. Everything else depends on this.
- Set leading. Get the vertical rhythm right before touching anything horizontal.
- Adjust tracking. Tune the overall density of the text block.
- Kern manually. Only on display type, logos, or anything large and visible. Don’t waste time kerning body copy.
Where to Find These Controls in Common Design Tools
| Tool | Kerning | Tracking | Leading |
|---|---|---|---|
| Figma | Letter spacing (manual per pair) | Letter spacing | Line height |
| Adobe InDesign | Kerning field (V/A icon) | Tracking field (VA icon) | Leading field |
| Photoshop / Illustrator | Character panel, V/A | Character panel, VA | Character panel |
| CSS / Web | font-kerning | letter-spacing | line-height |
Common Mistakes We Still See in 2026
- Kerning body text. Don’t. The font handles it. Spend your time on headlines.
- Forgetting to track all caps. Capital letters always need positive tracking, no exceptions.
- Default line height on long articles. Browser defaults are often too tight. Bump it to 1.5 1.6.
- Calling letter spacing “kerning” in CSS. Technically it’s tracking. Words matter when you brief a developer.
- Kerning a logo by eye without zooming out. Always check at the size people will actually see it.
FAQ
What is the main difference between kerning and tracking?
Kerning adjusts space between two specific letters, while tracking adjusts space uniformly across a group of letters. Kerning is surgical, tracking is global.
Is kerning still relevant in web design in 2026?
For body text, no. Modern fonts and browsers handle it well. For hero headlines, logos in SVG, and display text, absolutely yes. Manual kerning still makes the difference between amateur and professional looking work.
What is the difference between kerning and tracking in Procreate or Figma?
Most digital tools (including Procreate and Figma) bundle both under a single “letter spacing” control. To actually kern, you have to manually select two letters and adjust only that pair. To track, you select the whole text and adjust everything at once.
What are common kerning mistakes to avoid?
Over-kerning until letters touch, ignoring tricky pairs like “To”, “Wa”, “Ye”, kerning at the wrong zoom level, and trying to kern small body text. Always check your work at actual display size.
How is leading different from kerning and tracking?
Leading is vertical (space between lines), while kerning and tracking are both horizontal (space between letters). They solve different problems and should be tuned separately.
Final Word
Typography is 90% details no one notices and 10% details everyone feels. Kerning, tracking, and leading are the foundation of that 10%. Once you stop confusing them and start using them deliberately, your designs jump a level instantly.
Need help auditing the typography on your brand or website? Get in touch with our team at Joxa Design. We obsess over this stuff so you don’t have to.