Why Typography Spacing Matters More Than You Think
You have picked the perfect font for your project. The colors are right, the layout is solid, and the hierarchy makes sense. But something still feels off. The text looks cramped, awkward, or hard to read.
Nine times out of ten, the problem is spacing.
In typography, three spacing controls determine how polished and readable your text looks: kerning, tracking, and leading. These terms confuse most beginners because they all deal with space around letters. But each one does something very different.
In this guide, we break down all three concepts, explain when to adjust each setting, and show you how they work together to create clean, professional type.
Quick Overview: Kerning, Tracking, and Leading at a Glance
| Term | What It Controls | Direction | Scope |
|---|---|---|---|
| Kerning | Space between two specific letters | Horizontal | Individual letter pairs |
| Tracking | Uniform spacing across a word, line, or block of text | Horizontal | Entire range of characters |
| Leading | Vertical space between lines of text | Vertical | Entire paragraph or text block |
Think of it this way: kerning is surgical, tracking is uniform, and leading is vertical. Now let us dig deeper into each one.
What Is Kerning?
Kerning is the adjustment of space between two specific characters. It exists because not all letter shapes sit comfortably next to each other at a default distance.
Consider the uppercase letters A and V placed side by side. Because of their angled shapes, the default spacing often makes them look too far apart. Kerning lets you tighten that gap so the pair looks optically balanced.
Common Letter Pairs That Need Kerning
- AV and VA
- To and Tr
- We and Yo
- LT and TA
- Wa and Pa
Most professional fonts include built-in kerning tables that handle these pairs automatically. This is called metrics kerning. Design software like Adobe Illustrator, Photoshop, and InDesign also offers optical kerning, where the software analyzes letter shapes and adjusts spacing on its own.
When Should You Manually Adjust Kerning?
- Headlines and logos. Large text exposes spacing flaws that are invisible at small sizes.
- Brand names and titles. Every letter pair in a logo should be visually balanced.
- Display type above 24pt. The bigger the text, the more noticeable uneven spacing becomes.
- When mixing fonts or weights. Combining different typefaces can produce awkward pairs.
Pro tip: You rarely need to kern body text manually. At small sizes, built-in font kerning and your software’s automatic settings handle things well enough.
What Is Tracking?
Tracking (sometimes called letter-spacing in CSS and web design) adjusts the spacing uniformly across an entire word, sentence, or block of text. Unlike kerning, which targets specific pairs, tracking applies the same amount of added or reduced space between every character in the selection.
Tracking vs Kerning: The Key Difference
This is where most people get confused. Here is the simplest way to remember it:
- Kerning = adjusting the space between two letters.
- Tracking = adjusting the space between all letters equally.
A typographer will typically set the tracking first to establish the overall feel of the text, and then fine-tune individual letter pairs with kerning.
When Should You Adjust Tracking?
- Uppercase headings. All-caps text almost always benefits from increased tracking. The letters tend to feel cramped without it.
- Small text or captions. Slightly looser tracking can improve legibility at very small sizes.
- Elegant or editorial layouts. Wide tracking on headings is a common design trend that gives text a premium, airy feel.
- Fitting text into a fixed space. Tightening or loosening tracking by small amounts can help copy fit a column without changing the font size.
- Dark backgrounds. Light text on a dark background often benefits from a small tracking increase because it can appear tighter than it actually is.
Tracking Values: A General Guide
| Situation | Tracking Adjustment |
|---|---|
| All-caps headings | +50 to +200 |
| Body text (default) | 0 (leave as is) |
| Very small captions (below 9pt) | +10 to +30 |
| Tight display type for impact | -10 to -30 |
These are starting points, not rules. Always trust your eyes over the numbers.
What Is Leading?
Leading (pronounced “ledding”) controls the vertical distance between lines of text. The name comes from the old days of metal typesetting, when printers placed thin strips of lead between rows of type to add space.
In modern design software, leading is measured from one baseline to the next. In CSS, the equivalent property is line-height.
Why Leading Matters for Readability
Leading is arguably the most impactful spacing setting for body text. Here is why:
- Too tight: Lines of text blend together. The reader’s eye struggles to follow from the end of one line to the beginning of the next.
- Too loose: The text feels disconnected. Paragraphs lose cohesion and the page looks empty.
- Just right: The reader can move through the content comfortably without effort.
Recommended Leading Values
A common rule of thumb is to set leading at 120% to 145% of the font size. For example:
| Font Size | Recommended Leading Range |
|---|---|
| 10pt | 12pt to 14.5pt |
| 16px (web body text) | 19px to 23px (line-height: 1.2 to 1.45) |
| 24pt (subheading) | 28pt to 34pt |
| 48pt+ (large headlines) | Tighter leading often works (100% to 110%) |
Longer lines of text need more leading. If your content stretches across a wide column, increase the line spacing so the reader’s eye can find the next line easily.
When Should You Adjust Leading?
- Long-form content. Blog posts, articles, and reports should have generous leading for comfortable reading.
- Headlines. Multi-line headlines often look better with tighter leading to keep the text grouped together.
- Mobile layouts. Smaller screens benefit from slightly increased line height.
- Fonts with tall x-heights. Typefaces where the lowercase letters are relatively large may need extra leading because the text can feel dense.
How Kerning, Tracking, and Leading Work Together
These three spacing tools are not competing with each other. They work on different levels of your typography, and professional designers adjust all three to achieve clean results.
Here is a practical workflow:
- Set your leading first. Establish comfortable line spacing for your body text and headings.
- Adjust tracking next. Fine-tune the overall letter spacing, especially for all-caps text, small captions, or display type.
- Refine with kerning last. Zoom into headlines, logos, and large type to fix individual letter pairs that look uneven.
This order makes sense because each step builds on the previous one. Changing leading after kerning would not undo your kerning work, but starting with the broadest adjustment and working toward the finest gives you a more efficient process.
Is Kerning Still Relevant in Web Design?
Yes, but with caveats. Most modern web fonts include solid kerning tables, and browsers apply them by default through the font-kerning CSS property. For body text on the web, manual kerning is rarely necessary.
However, for hero sections, landing page headlines, and brand-focused pages, paying attention to letter-pair spacing can make a noticeable difference. CSS does not offer a direct kerning property for individual pairs, but you can achieve fine control with JavaScript libraries or by adjusting individual characters with <span> elements when it really matters.
Tracking, on the other hand, is easy to control on the web using the letter-spacing CSS property. And leading is managed through line-height. Both are essential tools in every web designer’s toolkit.
Common Mistakes to Avoid
- Over-tracking body text. Adding too much letter spacing to paragraphs makes words harder to recognize as units. Keep body text at default tracking in most cases.
- Ignoring kerning on logos. A logo with poor kerning looks unprofessional, no matter how good the typeface is.
- Using auto leading without checking. Software defaults are not always ideal. Always preview your leading and adjust based on the specific font and layout.
- Negative tracking on small text. Tightening letter spacing at small sizes kills readability.
- Forgetting that font choice affects spacing. Some typefaces are naturally tighter or looser. Your spacing adjustments should respond to the specific font you are using, not follow a universal formula blindly.
Tools for Practicing and Adjusting Typography Spacing
If you want to sharpen your eye for kerning, tracking, and leading, here are some tools and resources worth exploring:
- Kern Type – A free browser game that trains your kerning skills by having you manually space letter pairs.
- Adobe InDesign / Illustrator – Industry-standard tools with full control over kerning, tracking, and leading in the Character panel.
- Figma – Offers letter spacing (tracking) and line height (leading) controls. Kerning support depends on the font file.
- Google Fonts – A great place to preview different typefaces and observe how their default spacing behaves at various sizes.
Frequently Asked Questions
What are the 4 types of typography spacing?
The four main spacing concepts in typography are kerning (space between two specific letters), tracking (uniform space across all letters), leading (vertical space between lines), and word spacing (the gap between individual words). Kerning, tracking, and leading are the three that designers adjust most often.
What is the spacing between lines of text called?
The vertical spacing between lines of text is called leading (pronounced “ledding”). In web design and CSS, the equivalent property is line-height. It is one of the most important factors in making body text comfortable to read.
Is kerning still relevant in web design?
Yes. While browsers apply built-in font kerning automatically, large headlines, hero text, and brand names on websites can still benefit from manual kerning attention. On the web, tracking (letter-spacing) and leading (line-height) are especially important and easy to control with CSS.
What is the difference between kerning and tracking?
Kerning adjusts the space between two specific letters to make a particular pair look balanced. Tracking adjusts the spacing uniformly across all characters in a word, line, or text block. Designers typically set tracking first for the overall feel, then use kerning to fix individual pairs.
What are the five main rules of typography?
While rules vary by source, five widely accepted principles are: (1) choose typefaces with purpose, (2) establish a clear visual hierarchy, (3) maintain consistent spacing with proper kerning, tracking, and leading, (4) limit the number of fonts in a single design, and (5) ensure contrast and readability across all devices.
Should I adjust tracking for all-caps text?
Almost always, yes. Uppercase letters are designed to appear at the start of words alongside lowercase letters. When you set an entire word or phrase in all caps, the letters tend to look crowded. Adding positive tracking (anywhere from +50 to +200 depending on the font and context) opens up the text and improves readability.
