Kerning vs Tracking vs Leading: What Every Designer Needs to Know
If you have ever looked at a piece of text and felt something was just off, the problem was likely related to spacing. In typography, three terms come up again and again: kerning, tracking, and leading. They all deal with space, but each one controls a different aspect of how text looks and reads.
At Neko Design, we work with type every single day. Whether it is a logo, a website header, or body copy in a brochure, getting these three spacing properties right is the difference between amateur and polished design.
In this guide, we will give you a clear, beginner-friendly breakdown of kerning vs tracking vs leading, explain when to adjust each one, and show you how they work together to create beautiful, readable text.
Quick Overview: Kerning, Tracking, and Leading at a Glance
| Term | What It Controls | Scope | Direction |
|---|---|---|---|
| Kerning | Space between two specific characters | Individual letter pairs | Horizontal |
| Tracking | Uniform spacing across a group 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 dive deeper into each one.
What Is Kerning?
Kerning is the process of adjusting the space between two specific characters. It is the most precise of the three spacing adjustments because it targets individual letter pairs rather than the whole text.
Why Does Kerning Matter?
Not all letter combinations sit together naturally. Because of the shapes of certain characters, some pairs look too far apart or too close together when set at their default spacing. Consider the classic example of the letters A and V. Their angled shapes create a visual gap that feels wider than the actual measured distance. Kerning lets you tuck those two characters closer together so they appear evenly spaced.
Common Letter Pairs That Need Kerning
- AV and VA
- To and Ty
- WA and AW
- Yo and LT
- PA and AT
When Should You Adjust Kerning?
Kerning is most important in:
- Logos and brand names where every detail is magnified.
- Headlines and display type set at large sizes, where spacing irregularities become obvious.
- Short text like taglines, menu items, or navigation labels.
For body text at small sizes, most professional fonts include built-in kerning tables that handle common pairs automatically. You usually do not need to manually kern paragraphs of body copy.
How to Adjust Kerning
In tools like Adobe InDesign, Illustrator, or Figma, you place your cursor between two characters and change the kerning value. A negative value brings the letters closer together, and a positive value pushes them apart.
What Is Tracking?
Tracking (also called letter-spacing in CSS) adjusts the spacing uniformly across an entire group of characters. Unlike kerning, which targets a single pair, tracking affects every character in the selected text by the same amount.
Kerning vs Tracking: The Key Difference
This is the question most people search for, so let us make it crystal clear:
- Kerning = adjusting the space between one pair of letters.
- Tracking = adjusting the space between all letters in a word, sentence, or block equally.
Think of it this way: kerning is like using a scalpel, while tracking is like using a paint roller. One is surgical; the other applies a uniform change everywhere.
When Should You Adjust Tracking?
- Uppercase text: All-caps words often look cramped at default spacing. Adding positive tracking (loosening) gives them room to breathe.
- Small text or captions: Slightly increased tracking can improve readability for very small type sizes.
- Large headlines: Very large text sometimes benefits from tighter (negative) tracking to keep words cohesive.
- Stylistic purposes: Loose tracking is a popular design trend for modern, minimalist aesthetics.
Tracking in Web Design (CSS)
In CSS, tracking is controlled with the letter-spacing property. For example:
h1 {
letter-spacing: 0.05em;
}
.uppercase-label {
text-transform: uppercase;
letter-spacing: 0.12em;
}This is one of the most common typographic adjustments web designers make, and it is absolutely still relevant in modern web design.
What Is Leading?
Leading (pronounced “ledding”) controls the vertical space between lines of text. The name comes from the strips of lead that typesetters used to place between rows of metal type in the days of the printing press.
In digital design tools, leading is often called line height or line spacing. In CSS, it is set with the line-height property.
Why Does Leading Matter?
Leading has a massive impact on readability. Text that is too tightly spaced vertically feels claustrophobic, and readers lose their place between lines. Text that is too loosely spaced feels disconnected, and the paragraph no longer holds together as a visual unit.
General Guidelines for Leading
| Text Type | Recommended Leading |
|---|---|
| Body text (print) | 120% to 145% of font size |
| Body text (web) | 1.5 to 1.75 line-height |
| Headlines | 100% to 120% of font size |
| Display / decorative type | Can go tighter (90% to 110%) |
These are starting points. The best leading depends on the typeface, the column width, and the context of the design.
Is Tracking the Same as Leading?
No. This is a common point of confusion. Tracking is horizontal spacing (between letters). Leading is vertical spacing (between lines). They are completely independent controls, but they work together to define the overall texture and readability of your text.
How Kerning, Tracking, and Leading Work Together
Great typography is never about adjusting just one of these properties in isolation. Here is a typical workflow a designer might follow:
- Set the leading first. Establish a comfortable line height that makes the text easy to read.
- Adjust tracking. Fine-tune the overall letter-spacing to match the design style and improve readability at the chosen type size.
- Kern individual pairs last. Once the overall spacing feels right, zoom in and fix any specific letter pairs that look uneven, especially in headlines and logos.
This order makes sense because kerning adjustments are relative. If you change the tracking after you have already kerned, you may need to redo your kerning work.
Visual Guide: Spotting the Difference
Imagine the word TYPOGRAPHY displayed at a large size. Here is what each adjustment looks like conceptually:
Default Spacing
T Y P O G R A P H Y
The font’s built-in metrics handle spacing. Some pairs (like T and Y) may look a bit uneven.
After Kerning (T-Y pair tightened)
TY P O G R A P H Y
Only the T and Y are moved closer. Everything else stays the same.
After Tracking (all letters loosened)
T Y P O G R A P H Y
Every letter gets the same additional space. The overall word becomes wider and more airy.
After Leading Adjustment
You would not see a difference within a single word. Leading only becomes visible when you have multiple lines of text stacked vertically.
Practical Tips for Better Typography Spacing
- Always kern your logos. Auto-kerning is rarely perfect at display sizes.
- Add tracking to uppercase text. A small amount of positive tracking (around 0.05em to 0.15em) makes all-caps text much more legible.
- Do not track body copy too loosely. Over-tracking paragraphs makes them harder to read, not easier.
- Use optical kerning in Adobe apps. The “Optical” kerning setting in InDesign and Illustrator often produces better results than “Metrics” for mixed-font or unusual type combinations.
- Test leading on mobile screens. Line height that works on desktop may feel too tight on a phone where the column is much narrower.
- Squint at your work. Squinting blurs the details and lets you see the overall texture of the text. Dark spots indicate tight areas; light spots indicate loose areas.
Kerning vs Tracking in Popular Design Tools
| Tool | Kerning | Tracking | Leading |
|---|---|---|---|
| Adobe InDesign | Character panel (cursor between letters) | Character panel (select text) | Character panel (line height field) |
| Adobe Illustrator | Character panel or Alt + arrow keys | Character panel | Character panel |
| Figma | Not natively supported (manual workaround) | Letter spacing field | Line height field |
| CSS (Web) | Not directly available | letter-spacing |
line-height |
| Canva | Not available | Letter spacing slider | Line height slider |
As you can see, kerning is the most specialized adjustment and is not always available in simpler or web-based tools. Tracking and leading are widely supported everywhere.
Is Kerning Still Relevant in Web Design?
Yes, but with a caveat. On the web, you cannot kern individual letter pairs with standard CSS. The browser relies on the font’s built-in kerning tables, which are applied automatically when you use font-kerning: normal; (or the font-feature-settings property).
For most web body text, this automatic kerning is perfectly fine. However, for large hero text, logos rendered in HTML, or custom headings, the lack of manual kerning control is a real limitation. In those cases, designers often:
- Use SVG or image-based logos where kerning is baked in.
- Wrap individual characters in
<span>elements and adjust margins (not ideal, but functional). - Choose web fonts with excellent built-in kerning tables.
So while manual kerning on the web is limited, understanding kerning principles is still essential for any designer working on logos, branding, or print projects.
Frequently Asked Questions
What is the main difference between tracking and kerning?
Kerning adjusts the space between two specific letters, while tracking adjusts the space between all letters in a selected block of text uniformly. Kerning is precise and pair-specific; tracking is a global adjustment.
Is tracking the same as leading?
No. Tracking controls horizontal spacing between letters. Leading controls vertical spacing between lines of text. They affect completely different dimensions of your typography.
What is kerning vs spacing?
“Spacing” is a general term that can refer to kerning, tracking, or leading. Kerning specifically means adjusting the horizontal distance between one pair of characters. When people say “letter spacing,” they usually mean tracking.
When should I use kerning vs tracking?
Use tracking when you want to change the overall density or airiness of a word, headline, or paragraph. Use kerning when you notice a specific pair of letters that looks too tight or too loose compared to the rest of the text.
Can I kern text in CSS?
CSS does not offer manual control over individual kerning pairs. However, browsers can apply a font’s built-in kerning data using font-kerning: normal;. For manual per-character adjustments, you would need to use JavaScript or wrap letters in individual elements.
What is a good default line height for web body text?
A line-height of 1.5 to 1.75 is a solid starting point for paragraph text on the web. This range provides enough vertical space for comfortable reading across different screen sizes and typefaces.
Does tracking affect kerning?
Yes, indirectly. Tracking adds or removes space between all characters, which changes the overall context. If you apply tracking after kerning, the kerning adjustments remain, but the overall feel of the spacing will shift. That is why it is best to set tracking first and kern afterward.
Wrapping Up
Understanding the difference between kerning, tracking, and leading is one of the most fundamental skills in typography and design. To summarize it one final time:
- Kerning = space between two specific letters (horizontal, surgical).
- Tracking = space between all letters in a selection (horizontal, uniform).
- Leading = space between lines of text (vertical).
Master these three controls, and your text will instantly look more professional, more readable, and more intentional. Whether you are designing a logo in Illustrator, building a website in Figma, or writing CSS for a client project, these principles apply everywhere.
Need help with typography or design for your next project? Get in touch with our team at Neko Design. We love making text look its absolute best.