Kerning vs Tracking vs Leading: Why Typography Spacing Matters
If you have ever looked at a design and felt something was “off” without being able to pinpoint why, the answer was probably spacing. Kerning, leading, and tracking are three fundamental typography controls that determine how text looks and feels on a page or screen. Yet they remain some of the most commonly confused terms in design.
Whether you are a beginner building your first portfolio or an intermediate designer refining your craft, understanding these three settings will instantly level up your work. In this guide, we break down each concept, explain when to use it, and show you how small adjustments can dramatically improve readability and design quality.
Quick Overview: Kerning, Tracking, and Leading at a Glance
| Term | What It Controls | Scope | Common Units |
|---|---|---|---|
| Kerning | Space between two specific letters | Individual letter pairs | Em units, arbitrary units |
| Tracking | Space between all letters uniformly | Entire word, line, or block of text | Em units, arbitrary units |
| Leading | Vertical space between lines of text | Entire paragraph or text block | Points, pixels, or percentage of font size |
Now let’s dig deeper into each one.
What Is Kerning in Typography?
Kerning is the process of adjusting the space between two individual characters. It exists because different letter shapes naturally create uneven visual gaps when placed side by side. For instance, the pair “AV” tends to look too far apart at default spacing, while “HH” looks perfectly fine.
Kerning does not apply a blanket change to all letters. Instead, it targets specific letter pairs to create an even visual rhythm across a word.
When Should You Adjust Kerning?
- Logo design: Logos are viewed at large sizes and small, so every letter pair relationship matters.
- Headlines and display type: Large text magnifies awkward spacing that goes unnoticed in body copy.
- Branding materials: Business cards, signage, and packaging all benefit from manual kerning attention.
Common Kerning Mistakes to Avoid
- Ignoring optical spacing: Relying only on the software’s default metrics without checking visually.
- Over-kerning: Pushing letters so close together that they overlap or merge, reducing legibility.
- Inconsistent adjustments: Kerning some pairs but not others, creating a jarring uneven look.
- Kerning body text manually: For paragraphs of small text, your font’s built-in kerning tables and tracking adjustments are more efficient.
Kerning in Practice: Tools and Shortcuts
In Adobe Illustrator, InDesign, and Photoshop, you can kern by placing your cursor between two letters and adjusting the kerning value in the Character panel. In Figma and other modern design tools, the process is similar. Most professional fonts ship with extensive kerning tables that handle common pairs automatically, but display work almost always benefits from manual fine-tuning.
What Is Tracking in Typography?
Tracking (sometimes called letter-spacing in CSS) adjusts the spacing between all characters in a selected range of text uniformly. Unlike kerning, which targets individual pairs, tracking applies the same increase or decrease across every letter.
Think of it this way: kerning is a scalpel, and tracking is a dial that turns the overall openness of text up or down.
When Should You Adjust Tracking?
- All-caps text: Uppercase letters almost always look better with slightly increased tracking. This is one of the most impactful quick wins in design.
- Small text or captions: A slight increase in tracking can improve legibility at very small sizes.
- Stylistic headlines: Loose tracking gives headings an elegant, airy feel. Tight tracking adds urgency and density.
- Fitting text into a defined space: Minor tracking adjustments can help text fit a layout without changing font size.
Tracking Best Practices
- Avoid extreme values. Pushing tracking too far in either direction hurts readability fast.
- Always test at the actual viewing size. What looks good zoomed in at 400% may not hold up at 100%.
- Be consistent within a design system. If your subheadings use +50 tracking, keep that value across all subheadings.
What Is Leading in Typography?
Leading (pronounced “ledding”) controls the vertical distance between lines of text. The name comes from the strips of lead that typesetters placed between rows of metal type in the days of letterpress printing.
Leading is measured in points, pixels, or as a percentage of the font size. For example, a 16px font with 24px leading has a ratio of 1.5, which is a common starting point for body text on the web.
Is Leading the Same as Line Spacing?
In practical terms, yes. “Leading” is the traditional typographic term, while “line spacing” or “line-height” (in CSS) refers to the same concept in digital design. They are used interchangeably in most modern workflows.
When Should You Adjust Leading?
- Body text: Proper leading is essential for comfortable reading. Text that is too tight feels cramped; text that is too loose makes it hard for the eye to find the next line.
- Headlines: Large type often needs tighter leading because the default spacing creates too much air between lines.
- Narrow columns: Shorter line lengths can tolerate slightly tighter leading. Wide columns benefit from more generous spacing.
- Accessibility: Users with dyslexia or visual impairments generally benefit from increased line spacing. WCAG guidelines recommend at least 1.5 times the font size for body text.
Recommended Leading Values
| Text Type | Suggested Leading Ratio | Example (16px font) |
|---|---|---|
| Body text | 1.4 to 1.6 | 22px to 26px |
| Headlines | 1.0 to 1.2 | 16px to 19px |
| Captions / small text | 1.3 to 1.5 | 21px to 24px |
These are starting points. Always adjust based on the specific typeface, column width, and context of your design.
Kerning vs Tracking vs Leading: Side-by-Side Comparison
To make sure the differences are crystal clear, here is a direct comparison of all three:
| Feature | Kerning | Tracking | Leading |
|---|---|---|---|
| Direction | Horizontal | Horizontal | Vertical |
| Scope | Two characters | All characters in selection | All lines in a text block |
| Primary use | Fix awkward letter pairs | Set overall text density | Control line-to-line readability |
| Most critical for | Logos, headlines, display type | All-caps text, stylistic spacing | Body copy, paragraphs |
| CSS equivalent | font-kerning / font-feature-settings | letter-spacing | line-height |
How Kerning, Tracking, and Leading Work Together
In real-world design, these three settings are not used in isolation. A professional typographic workflow typically follows this order:
- Set the font size and leading first. Establish a comfortable vertical rhythm for your text block.
- Adjust tracking next. Fine-tune the overall letter density, especially for headlines and all-caps elements.
- Kern last. Once tracking is dialed in, manually adjust individual letter pairs where needed.
This sequence is important because changing tracking after kerning will override or distort your careful pair adjustments.
Is Kerning Still Relevant in Web Design?
Absolutely. Modern browsers support the font-kerning CSS property, and most quality web fonts include OpenType kerning tables. For standard body text, enabling the font’s built-in kerning is usually sufficient. For hero sections, landing page headlines, and brand typography, designers often use tools like Figma or Adobe XD to manually kern before exporting assets, or they apply custom letter-spacing values in CSS.
As variable fonts and advanced web typography continue to evolve in 2026, having fine control over spacing is more accessible and more important than ever.
Practical Tips for Better Typography Spacing
- Squint test: Squint at your text or blur it in Photoshop. This helps you see spacing patterns without getting distracted by the actual letterforms.
- Flip it upside down: Rotating your text 180 degrees forces your brain to evaluate spacing rather than reading words.
- Use kerning games: Tools like KernType (an online kerning game) are a fun way to train your eye.
- Trust your eyes over numbers: Optically even spacing is the goal, not mathematically equal spacing. Round letters like “O” and “C” need different treatment than flat-sided letters like “H” and “M”.
- Check across devices: Spacing that looks perfect on a desktop monitor may feel different on a mobile screen. Always preview at real sizes.
The Five Main Rules of Typography to Keep in Mind
While this article focuses on spacing, it helps to see kerning, tracking, and leading in the context of broader typography principles:
- Hierarchy: Use size, weight, and spacing to guide the reader’s eye.
- Readability: Spacing (leading, tracking, and kerning) plays a direct role in how easily text can be read.
- Contrast: Pair typefaces and spacing values that create clear visual distinction between elements.
- Consistency: Apply the same spacing rules across your entire design or brand system.
- Alignment: Proper alignment works hand-in-hand with spacing to create clean, professional layouts.
Kerning, Leading, and Tracking in Popular Design Tools
| Tool | Kerning | Tracking | Leading |
|---|---|---|---|
| Adobe Photoshop | Character panel > Kerning field | Character panel > Tracking field | Character panel > Leading field |
| Adobe InDesign | Character panel or Alt/Opt + arrow keys | Character panel or select text + Alt/Opt + arrow keys | Character panel or paragraph settings |
| Figma | Place cursor between letters > adjust letter spacing | Select text > Letter spacing field | Select text > Line height field |
| CSS | font-kerning: auto/normal/none | letter-spacing: value | line-height: value |
Frequently Asked Questions
What is the difference between kerning and tracking?
Kerning adjusts the space between two specific letters to fix visually uneven gaps. Tracking adjusts the space between all letters in a selected range uniformly. Kerning is precise and pair-specific; tracking is a global adjustment.
Is leading the same as line spacing?
Yes, in practical terms they refer to the same thing. “Leading” is the traditional typographic term, while “line spacing” and “line-height” are the modern equivalents used in digital design and CSS.
What are the best kerning, tracking, and leading values?
There are no universal “best” values because they depend on the typeface, font size, medium, and context. However, a good starting point for body text is a leading ratio of 1.4 to 1.6 times the font size, default tracking (0), and the font’s built-in kerning enabled.
Is kerning still relevant in web design in 2026?
Yes. Modern CSS supports font-kerning and letter-spacing properties, and quality web fonts include kerning data. For headlines, hero text, and brand elements on the web, proper kerning remains essential for a polished look.
Should I kern body text manually?
Generally, no. Manual kerning is time-consuming and most professional fonts have well-designed kerning tables that handle body text effectively. Focus manual kerning efforts on display text, logos, and headlines where individual letter pairs are more visible.
What are common kerning mistakes to avoid?
The most common mistakes include relying solely on default metrics without a visual check, over-tightening letters until they overlap, making inconsistent adjustments across a word, and spending time manually kerning small body text where it is not needed.
What order should I adjust kerning, tracking, and leading?
Start with leading to set your vertical rhythm, then adjust tracking for overall horizontal density, and finish with kerning for individual letter pairs. This order prevents later adjustments from undoing earlier work.