TL;DR: Kerning vs tracking comes down to scope. Kerning adjusts the space between one specific pair of letters, such as “A” and “V.” Tracking adjusts the spacing evenly across a whole word, line or block of text. Leading is the third member of the family and controls the vertical space between lines. In CSS, tracking maps to letter-spacing, leading maps to line-height, and font kerning is controlled with font-kerning.
Typography terms trip up a lot of new designers, and the kerning vs tracking question is one of the most common. Both change the space between letters, both appear in Figma, Photoshop and every other design tool, and both can make text look polished or sloppy. This guide explains the difference in plain English, adds leading to the picture, and shows when and how to use each, with practical tips for web and print.
Kerning vs tracking: the short answer
| Kerning | Tracking | Leading | |
|---|---|---|---|
| What it changes | Space between two specific characters | Space between all characters in a selection | Vertical space between lines |
| Direction | Horizontal | Horizontal | Vertical |
| Typical use | Fixing awkward letter pairs in logos and headlines | Tightening big headings, loosening small caps and labels | Improving readability of paragraphs |
| CSS equivalent | font-kerning (uses the font’s built-in pairs) | letter-spacing | line-height |
| Also called | Pair kerning | Letter spacing | Line spacing |
What is kerning?
Kerning is the adjustment of space between a specific pair of characters so the gap looks visually even. The Google Fonts glossary treats it as a pair-by-pair correction, and that is the key idea: kerning is about relationships between two letters, not the whole word.
Why is it needed? Letters have different shapes. Mathematically equal spacing often looks uneven to the eye because of diagonal and overhanging shapes. Classic problem pairs include:
- AV, VA, AW: diagonal strokes leave a large wedge of white space.
- To, Ta, Ty: the arm of a capital T overhangs the lowercase letter next to it.
- LT, LY: the open space after a capital L creates a visible hole.
- r and n set tightly: “rn” can read as “m” if the pair is too close.
Metric vs optical kerning
Most professional fonts ship with a built-in kerning table, a list of letter pairs and how much to adjust each one. Design apps usually use this by default, often labeled metric kerning. Some tools, such as Adobe’s apps, also offer optical kerning, which calculates spacing from the letter shapes themselves. Optical kerning can help with fonts that have poor or missing kerning data, or when you mix fonts in one line.
Manual kerning is the final layer: a designer nudges individual pairs by eye. It is worth the effort on logos, headlines and anything set very large, and rarely worth it on body text.
What is tracking?
Tracking adds or removes the same amount of space between every character in a selection. The Google Fonts glossary entry on tracking covers the idea, and most tools simply label it letter spacing.
Because tracking is uniform, it keeps the font’s internal kerning relationships intact while making the whole line tighter or looser. Common rules of thumb designers use:
- Tighten large headlines slightly. Display sizes often look too airy at default spacing.
- Loosen all-caps and small text. Uppercase labels, buttons and small captions usually read better with a little extra space.
- Leave body text alone. Fonts are generally spaced for reading sizes already, so heavy tracking on paragraphs hurts readability.
In CSS, tracking is the letter-spacing property. Using relative units such as em (for example letter-spacing: 0.05em) keeps spacing proportional when font sizes change.
What is leading?
Leading (pronounced “ledding”) is the vertical distance between lines of text. The name comes from metal typesetting, when printers inserted thin strips of lead between rows of type. The Google Fonts glossary covers it alongside kerning and tracking.
On the web, leading is set with line-height. A unitless value such as line-height: 1.5 is the usual choice because it scales with the font size of each element.
Kerning, tracking and leading on the web
Web browsers handle these three a little differently from design apps:
- Kerning is usually applied automatically from the font’s built-in data. The
font-kerningproperty acceptsauto,normalornone. CSS has no simple way to kern a single pair; for that, designers wrap letters in spans or adjust the type in an image or SVG logo. - Tracking is
letter-spacing, applied to any element. - Leading is
line-height.
Accessibility matters
The W3C’s WCAG 2.2 Text Spacing criterion (1.4.12) says content should not break or lose information when users increase spacing to at least 1.5 times the font size for line height, 2 times for spacing after paragraphs, 0.12 times for letter spacing and 0.16 times for word spacing. In practice, that means avoiding fixed-height text boxes that clip text when spacing grows. It pairs well with our guide to design systems, where spacing values are usually stored as reusable tokens.
How to adjust kerning and tracking in popular tools
- Figma: select a text layer and use Letter spacing (tracking) and Line height (leading) in the Text panel. Figma’s text properties help page explains each setting.
- Adobe Photoshop, Illustrator and InDesign: the Character panel has separate kerning and tracking fields, plus a Metrics/Optical choice for kerning. Place the cursor between two letters to kern that pair.
- Canva: the Spacing control on the text toolbar adjusts letter spacing and line spacing.
- Google Docs and Word: line spacing is easy to change; character spacing is more limited, which is one reason designers move headline work into dedicated tools. If you are choosing between apps, see Figma vs Canva.
A simple workflow
- Set leading first for body text so paragraphs are comfortable to read.
- Adjust tracking for headings, all-caps labels and small text.
- Kern last, only on large text where gaps are visible.
- Check at real size and on real devices, not only zoomed in.
- Squint test: blur your eyes slightly; uneven gaps and dark clumps become easier to spot.
Common mistakes
- Using tracking to fix one bad letter pair, which changes every other gap too.
- Over-tightening headlines until letters touch.
- Adding wide letter spacing to lowercase body text.
- Setting fixed-height containers that break when users enlarge text spacing.
Bottom line
The kerning vs tracking difference is simple once you see it: kerning fixes individual letter pairs, tracking changes spacing across a whole selection, and leading handles the space between lines. Get all three right and your type will look deliberate and easy to read. Planning a new layout? Start with a wireframe before you fine-tune the type.
The Teck Hustlers Editorial Team covers technology, business, finance and gaming news for readers who want the story behind the headline. Every article is researched, written and edited by our in-house team, checked against company announcements, filings and reputable reporting, and updated when new facts emerge. We focus on what each development means for founders, professionals, investors and everyday users. Have a tip or a correction? Reach us through our contact page.
