Kerning, Tracking, and Leading: The Hands-On Guide to Better Text

Why spacing makes or breaks your typography

Typography isn’t only about picking a beautiful font. The way you space letters and lines can turn an okay layout into something sharp, readable, and credible. Most clients won’t say “your kerning is off,” but they will feel it when a headline looks patchy or a paragraph feels cramped. Poor spacing slows reading and makes design look amateur. Good spacing invites the eye and strengthens your message.

This guide is practical and hands-on. You’ll learn the difference between kerning, tracking, and leading, when to change each one, and how to adjust them in common tools. You’ll get step-by-step checklists, real examples, and a simple workflow you can reuse on any project—web, print, or product UI. By the end, you’ll have a repeatable method to set type that looks intentional, reads smoothly, and scales across devices.

Kerning: how to fix awkward letter pairs (logos & headlines)

Kerning is the space between individual letter pairs. It corrects optical gaps that happen because letters are shaped differently. Angled and curved letters often create uneven white space (think “A,” “V,” “W,” “Y,” “T,” “O”).

Spot the usual suspects

• Pairs with diagonals: AV, VA, WA, YA, TY, AY, WV
• Round-to-stem pairs: To, Ta, Vo, We, Yo
• Confusable pairs: rn (can read as m) and cl (can read as d)

Kerning checklist (5 minutes max)

1. Type your word or logo at a large size (300–600 pt for a logo; 72–120 pt for headlines).
2. Zoom out to 100% and squint. Look for “holes” (too loose) and “dark spots” (too tight).
3. Nudge pairs until the spaces feel optically even, not mathematically equal.
4. View at multiple sizes. What works big can fall apart small.
5. Save your adjustments as a reusable style or component.

Practical controls

• Illustrator/InDesign: use Option/Alt + ←/→ to kern pair-by-pair.
• Figma: select the caret between letters and use Alt + ←/→ (advanced type setting).
• CSS: browser kerning can be improved with font-kerning: normal; and high-quality fonts. For special cases (logos in SVG), adjust glyph positions in the vector file.

Good vs. bad, described

• Bad kerning example: “W A T E R” looks like three words: “W”, “A T E”, “R.” The “A” sits in a white canyon.
• Good kerning example: “WATER” reads as a single shape. Inner triangles and curves tuck together without touching.

Pro tip: If you’re spending forever kerning a logo, the font may not fit the brand’s geometry. Try a face with shapes that echo your mark (e.g., wider “A” apex for angular logos).

Tracking: make words and paragraphs breathe (web & print)

Tracking is the overall spacing across a range of letters—a word, a sentence, or an entire block. Where kerning is a scalpel, tracking is a wide brush that sets the overall texture.

When to tighten tracking

• Short, loud headlines that need punch
• Wide, display fonts that look too airy by default
• All-caps treatments (tighten slightly to avoid gaps)

When to loosen tracking

• Long paragraphs for better legibility
• Small text (sub-12 px/pt) that tends to clump
• Condensed fonts that feel dense at body sizes

Practical ranges to test

• Headlines: from slight negative to neutral tracking (e.g., −2% to 0%)
• All caps: start around −1% to −3% and adjust by eye
• Body text: from neutral to mildly loose (e.g., 0% to +1.5%); small sizes may benefit from +2% to +3%

Workflow for tracking

1. Start at the font’s default.
2. Zoom to the intended viewing size.
3. Adjust in small, consistent increments (e.g., ±10–20 units in layout apps).
4. Print or export a test. On paper, tight tracking looks tighter; on screens, loose looks looser.

Web and product UI

• CSS property: letter-spacing
• Use small values (e.g., 0.01em to 0.03em) for body sizes if needed.
• Avoid globally negative tracking in body text; it harms readability on lower-density screens.

Rule of thumb

• Tight tracking signals confidence and urgency.
• Loose tracking signals calm and elegance.
• Both extremes are risky; center your choice on context and audience.

Leading: set line spacing for real-world readability (mobile, desktop, print)

Leading is the vertical space between baselines of text lines. It guides the eye from one line to the next. Too tight and readers get lost; too loose and lines feel disconnected.

Starting points (edit from here)

• Body copy: 120–145% of the font size (12 pt → 14.4–17.4 pt)
• Headlines (1–2 lines): 100–120% depending on weight and capitalization
• Captions/footnotes: 130–150% to keep small text open

Factors that change leading

• X-height: Tall lowercase letters need more leading; short x-heights need less.
• Measure (line length): Longer lines need more leading. For 60–75 characters per line, lean toward the high side.
• Weight and contrast: Heavy or ultra-light fonts often need extra space.
• Language and script: Diacritics and stacked marks require headroom.

Leading setup, step by step

1. Set your measure (ideal 45–75 CPL for body; 28–45 CPL on mobile).
2. Choose a starting leading (e.g., 1.45 for web body text).
3. Scroll a full screen. If you lose your place, add a touch more leading.
4. Print a page. If paragraphs look like ladders (over-separated lines), reduce slightly.
5. Lock a baseline grid on long-form print so headings and body sit on consistent increments.

Described examples

• Too tight: lines feel glued; descenders (like “g”, “p”, “y”) bump into ascenders (“h”, “l”).
• Too loose: a paragraph looks striped; your eye “jumps” between lines.
• Balanced: lines form smooth ribbons; your eye glides without effort.

Web and product UI

• CSS property: line-height (unitless values like 1.4 scale better across sizes).
• Use line-height: 1.45 for 16 px body as a baseline, then test on real devices.

Put it all together: a repeatable spacing workflow

You’ll get faster and more consistent results by always adjusting in the same order.

The order that saves time

1. Kerning (micro): fix the distracting pairs.
2. Tracking (word/block): set the texture.
3. Leading (paragraph/page): tune reading flow.
4. Measure (line length): confirm CPL and adjust leading again if needed.
5. Scale across breakpoints/sizes: test mobile, tablet, desktop, and print.

Three real-world scenarios

1. Hero headline on a landing page
   • Start with tighter kerning for cohesion.
   • Tracking slightly negative (e.g., −1%) for impact.
   • If it wraps, set tighter leading (1.05–1.15) to keep lines visually grouped.
   • Sanity check on small screens; loosen tracking if letters crowd.
2. Blog article body
   • Keep kerning mostly default; correct only obvious outliers.
   • Neutral or slightly loose tracking for breathability.
   • line-height: 1.45–1.6 depending on font x-height.
   • Ensure 60–75 CPL on desktop; ~45–60 on mobile.
3. Mobile app settings screen
   • Avoid negative tracking; small sizes need clarity.
   • letter-spacing near 0em or a tiny positive value if the font runs tight.
   • Leading generous enough to avoid crowding tappable rows (ensure touch targets).

Quick diagnostic checks

• If a word feels “bumpy,” adjust kerning on its worst pair first.
• If a block feels heavy or gray, loosen tracking a notch.
• If paragraphs feel like brick walls, increase leading or shorten measure.
• If you see rivers in justified text, reduce hyphenation thresholds and consider ragged-right.

Troubleshooting: fast fixes for common spacing problems

Problem 1: My logo looks amateur even with a great font.
Fix: Kern the worst pairs (AV, WA, To, Yo). Consider custom letterforms for 1–2 letters to harmonize angles or counters. Export as outlines and adjust paths if needed.

Problem 2: Headlines look airy and weak.
Fix: Slight negative tracking and tighter leading. Increase weight by one step if design allows.

Problem 3: Body text feels dense and tiring.
Fix: Loosen tracking slightly and bump line-height. Also check line length; 90+ CPL is exhausting.

Problem 4: Paragraphs show “rivers” in justified text.
Fix: Use ragged-right for narrow columns or increase hyphenation (but cap consecutive hyphens). Slightly tighten word spacing limits in your layout tool.

Problem 5: All caps are hard to read.
Fix: Tighten tracking a touch and add a tiny boost to leading. Consider small caps instead of full caps for long strings.

Problem 6: Text breaks awkwardly across pages/columns.
Fix: Set keep options (keep lines together; avoid widows/orphans). Adjust leading so lines align with the baseline grid.

Tool-specific cheatsheet (Figma, Adobe, CSS)

Figma

• Kerning: place cursor between letters, Alt + ←/→.
• Tracking: set in the Type panel as Letter spacing (use small values like 1–3%).
• Leading: Line height as a fixed px value or “Auto”; prefer fixed for consistency.

Adobe InDesign/Illustrator

• Kerning: Option/Alt + ←/→ on the caret between letters.
• Tracking: Character panel; adjust in ±10 increments.
• Leading: Paragraph or Character panel; consider baselines in print.

CSS (web and UI)

• Kerning: font-kerning: normal; (use high-quality fonts for best effect).
• Tracking: letter-spacing: 0.01em; to 0.03em for small, dense fonts if needed.
• Leading: line-height: 1.45; for body; lower (1.1–1.3) for compact headings.
• Optional niceties: text-rendering: optimizeLegibility; (browser support varies).

Concrete examples you can emulate

Logo wordmark (modern sans)

• Start: default kerning feels uneven in “WA” and “TY.”
• Adjust: tuck “A” under the “W” arm; pull “T” slightly closer to “Y.”
• Track: −1% to bring the word together.
• Result: one cohesive silhouette that reads in a blink.

Editorial headline (serif, two-line)

• Start: default looks airy; the two lines drift apart.
• Adjust: minor kerning fixes in “To” and “Yo.”
• Track: neutral; rely more on leading.
• Lead: 1.1 to group the two lines as one unit.
• Result: elegant, compact headline with clear hierarchy.

Long-form blog body (screen-first)

• Start: 16–18 px text with neutral spacing.
• Track: +0.01em if the font prints tight.
• Lead: 1.5 on desktop, 1.6 on mobile to handle narrower measures.
• Result: a relaxed rhythm that reduces fatigue.

Quality control: a pre-publish spacing checklist

1. Set your measure (CPL) first; spacing depends on it.
2. Kern only where your eye stumbles.
3. Adjust tracking to match tone (tighter for punch, looser for calm).
4. Tune leading for the actual reading environment (device, distance, lighting).
5. Test at 3 sizes: mobile, tablet, desktop (or print at 100%).
6. Print or export a page and do a 10-second squint test. If the texture looks even, you’re close.
7. Save character and paragraph styles so spacing stays consistent everywhere.

Actionable takeaways you can apply today

• Fix spacing in this order: kerning → tracking → leading.
• For body text, start line-height around 1.45–1.6; adjust for x-height and measure.
• For headlines, try slightly negative tracking and tighter leading if they wrap.
• Keep body tracking near neutral; loosen a touch for small sizes or dense fonts.
• Test on real devices and at final output sizes; what works on a retina display may fail on a projector.
• Save your work as styles/components to lock in consistency across pages and platforms.

Why mastering spacing pays off

Kerning, tracking, and leading look like small tweaks, but together they shape how people experience your content. Good spacing increases trust, improves comprehension, and makes your design feel intentional. When your type reads effortlessly, your message lands faster and your brand looks sharper.

Make spacing a habit, not a one-off fix. Use the workflow here on every project, and you’ll build reliable, readable typography—on screens, in print, and anywhere words appear.