Typography is far more than just selecting pretty fonts. It's a craft that involves careful attention to the space between letters, words, and lines of text. When this spacing is done right, readers barely notice it—but when it's wrong, it can make text jarring and difficult to read.

Two of the most essential yet frequently confused spacing concepts in typography are leading and kerning. Though both deal with space in typography, they serve different purposes and affect readability in distinct ways. Understanding the difference between leading vs kerning is crucial for designers, developers, and anyone working with text.

Whether you're creating a logo, designing a website, or laying out a magazine, mastering these spacing elements will elevate your typography from amateur to professional. Let's break down what makes each unique and why they matter.

What is Kerning?

Definition and Purpose

Kerning refers to the adjustment of space between individual pairs of letters. Unlike uniform letter spacing that applies the same space between all characters, kerning is about fine-tuning specific character combinations to make them look visually balanced.

The need for kerning exists because letters have different shapes. When certain characters appear next to each other, they can create awkward gaps or feel too cramped. Good kerning ensures that the white space between every pair of characters feels optically consistent, making text more readable and aesthetically pleasing.

In professional typography, kerning is especially important for:

• Brand names and logos
• Headlines and large text
• All-caps text where spacing issues become more visible
• Custom lettering and typographic art

Examples of Kerning in Action

Some letter pairs naturally create spacing problems when placed side by side:

The letter combination "AV" often creates too much space due to the diagonal shapes leaning away from each other. Without proper kerning, you might see something like "A   V" when it should look more balanced as "AV".

Similarly, combinations like "To", "Wa", and "LY" typically need kerning adjustments to look right. In the word "WATER", for example, the "WA" might need to be brought closer together, while "TE" might need more space.

Most design software offers automatic kerning based on information built into well-designed fonts. This might be sufficient for body text, but for logos and headlines, manual kerning is often necessary. In programs like Adobe Illustrator or InDesign, you can adjust kerning by placing your cursor between letters and using keyboard shortcuts or the character panel.

When and Why to Adjust Kerning

You should pay special attention to kerning when:

1. Working with display text or headlines (12pt or larger)
2. Creating logos or brand identifiers where every detail matters
3. Using all capital letters, which tend to show kerning issues more prominently
4. Working with script fonts where characters need to connect naturally
5. Designing for print materials where typography quality is paramount

Poor kerning can make even expensive designs look amateurish. Imagine a high-end restaurant with a menu where the letters in "FINE DINING" are awkwardly spaced—it immediately undermines the impression of quality and attention to detail.

What is Leading?

Definition and Purpose

Leading (pronounced "ledding") refers to the vertical space between lines of text—specifically, the distance from the baseline of one line of text to the baseline of the line above or below it.

The term comes from traditional printing when strips of lead were inserted between lines of metal type to add vertical space. In modern typography, leading is typically measured in points and is often referred to as "line height" in web design.

Leading serves several crucial purposes:

• It improves readability by preventing lines from feeling cramped
• It establishes rhythm and flow in blocks of text
• It affects the overall density and tone of a text block
• It helps readers find their place when moving from one line to the next

How Leading Affects Readability

The amount of leading you choose has a significant impact on how easy text is to read:

Too little leading makes text feel dense and claustrophobic. Lines start to bleed into each other visually, making it difficult for readers to track from the end of one line to the beginning of the next. This causes eye fatigue and frustration.

Too much leading creates disconnected lines. Readers may lose their place as they jump from the end of one line to find the beginning of the next line too far below. The text also takes up unnecessary space and can look sparse and unintentional.

Ideal leading typically ranges between 120% and 150% of the font size for body text (though this varies based on factors like font choice, line length, and medium). For example, 12-point text might use 15-18 points of leading.

Best Practices for Setting Leading

In print design software like InDesign, leading is set through the character panel. In CSS for web design, leading is controlled using the line-height property:

p {
 font-size: 16px;
 line-height: 1.5; /* This sets leading to 150% of the font size */
}


Some general guidelines for effective leading include:

• Longer line lengths need more leading to help readers track from line to line
• Larger x-heights (the height of lowercase letters) typically require more leading
• Dark text on light backgrounds usually needs more leading than light text on dark backgrounds
• Headlines and large text often need less proportional leading than body text
• Text in columns typically needs less leading than text in a wide measure

Key Differences Between Leading and Kerning

Understanding how leading and kerning differ helps clarify when to use each technique:

FeatureKerningLeadingOrientationHorizontal spacingVertical spacingScopeBetween individual letter pairsBetween lines of textPrimary purposeVisual balance and readability of specific character combinationsOverall text block readability and flowWhen it matters mostLogos, headlines, display typeBody text, paragraphs, multi-line textSoftware adjustmentCharacter panel, keyboard shortcuts between lettersLine spacing controls, line-height in CSS

In practical terms, kerning is about micro-adjustments that make specific letter combinations look right, while leading is about the overall structure and readability of blocks of text. Both are essential, but they operate at different levels of typography.

In design software:

• Kerning is typically adjusted by placing your cursor between characters and using Alt+arrow keys (InDesign/Illustrator) or manual adjustments in the kerning field
• Leading is usually set as a paragraph or character attribute, or through the line-height property in CSS

Bonus: What About Tracking?

To fully understand typography spacing, we should also mention tracking—a concept often confused with kerning.

Tracking (also called letter-spacing) refers to the uniform adjustment of space between all characters in a selected piece of text. Unlike kerning, which addresses specific letter pairs, tracking applies the same spacing adjustment to every character in a word, sentence, or paragraph.

Tracking is useful for:

• Creating different text densities (tight or loose)
• Improving readability of very small text
• Achieving specific stylistic effects in headlines or logos
• Making all-caps text more readable (which typically benefits from slightly increased tracking)

In CSS, tracking is controlled with the letter-spacing property:

h1 {
 letter-spacing: 0.05em; /* Adds a small amount of space between all letters */
}


Understanding the distinctions between kerning, leading, and tracking gives you complete control over typography spacing in your designs.

Visual Examples: Kerning vs Leading vs Tracking

To better understand these concepts, let's look at how each affects the appearance of text:

Kerning Examples:

Poor kerning: "AVIARY" might look like "A   V   I   A   R   Y" with awkward spaces, especially between the A and V.

Good kerning: "AVIARY" with optically consistent spacing between all characters.

Leading Examples:

Tight leading: Text lines that feel cramped, causing readers to lose their place and experience eye strain.

Appropriate leading: Text with enough space between lines to create clear separation while maintaining the feeling of unified paragraphs.

Loose leading: Text that looks disconnected, with too much space between lines, making it difficult to follow from one line to the next.

Tracking Examples:

Normal tracking: "HEADLINE" with default letter spacing.

Tight tracking: "HEADLINE" with reduced space between all letters, creating a more compact look.

Expanded tracking: "H E A D L I N E" with increased space between all letters for a more dramatic, spaced-out effect.

How to Apply These Concepts in Design

Web Design

In web design, leading and tracking are controlled through CSS properties:

• Leading is set with line-height
• Tracking is set with letter-spacing
• While CSS doesn't offer direct kerning control, well-designed fonts have built-in kerning information that browsers can use with font-kerning: normal

Examples in CSS:

body {
 font-size: 16px;
 line-height: 1.5; /* Controls leading */
 letter-spacing: 0; /* Controls tracking */
 font-kerning: normal; /* Enables font's built-in kerning */
}

h1 {
 font-size: 48px;
 line-height: 1.2; /* Tighter leading for headlines */
 letter-spacing: -0.02em; /* Slightly tighter tracking for large text */
}


Responsive considerations are essential in web design—leading that works on desktop might feel too tight or too loose on mobile devices. Testing across various screen sizes is crucial.

Print and Editorial Design

In print design, tools like Adobe InDesign offer precise control over all spacing aspects:

• Kerning can be adjusted between specific letter pairs
• Leading can be set for paragraphs or individual lines
• Tracking can be applied to selected text

For editorial design, consistency is key. Establishing a typographic system with standardized leading values for different text elements (body text, headlines, captions, etc.) creates harmony throughout a publication.

Typography best practices for print include:

• Using tighter leading for headlines and larger text
• Increasing leading slightly for small body text
• Ensuring adequate leading for text printed over images or colored backgrounds
• Maintaining consistent leading within related text elements

Common Mistakes and How to Avoid Them

Even experienced designers make typography spacing errors. Here are some common pitfalls and how to avoid them:

Confusing Kerning with Tracking

The mistake: Applying tracking when what's needed is kerning (or vice versa).

The solution: Remember that tracking affects the entire text selection uniformly, while kerning targets specific letter pairs. If a single letter combination looks off, use kerning. If the entire text block needs spacing adjustment, use tracking.

Setting Leading Based Only on Numbers

The mistake: Applying a standard leading value without considering the actual visual appearance.

The solution: Always judge leading by eye, not just by the numbers. Different fonts at the same point size may need different leading values based on their x-height, ascenders, and descenders.

Forgetting About Responsive Typography

The mistake: Setting perfect typography for one screen size without considering how it will look on others.

The solution: Test typography across various devices and screen sizes. Consider using relative units (like em or rem) for more flexible typography that scales proportionally.

Over-Adjusting

The mistake: Applying extreme kerning, leading, or tracking adjustments that draw attention to the typography rather than the content.

The solution: Make subtle adjustments. Good typography is often invisible—it supports the content without calling attention to itself.

Not Considering Content and Context

The mistake: Applying the same spacing values regardless of content purpose or medium.

The solution: Adapt spacing based on the specific needs of each project. A billboard might need different kerning and leading than a novel, just as a news website requires different spacing than a luxury brand site.

Conclusion

The difference between leading vs kerning might seem technical, but understanding these typography fundamentals can dramatically improve your designs. Kerning fine-tunes the horizontal space between specific letter pairs, while leading controls the vertical space between lines of text. Both work together with tracking to create typography that's both beautiful and readable.

Mastering these spacing techniques takes practice and a trained eye. Start by analyzing typography you admire, noticing how professionals handle spacing in different contexts. Then apply these principles to your own work, making incremental adjustments and observing the results.

Remember that good typography supports content without drawing attention to itself. When spacing is done well, readers enjoy a smooth, uninterrupted experience—whether they're scanning a website, reading a book, or admiring a logo.