Kerning tracking and leading are the three spacing controls of type: kerning adjusts the gap between two specific letters, tracking adjusts the spacing across a whole run of text, and leading sets the space between lines.
These controls sit at the centre of typography basics, because well-spaced text reads smoothly while poorly spaced text distracts even readers who cannot say why.
What each spacing control does
The three terms are often confused, and the confusion is understandable because all of them change how open or tight a piece of text feels. The difference is the scope of each adjustment. Kerning works on a single pair of characters. Tracking works on a selection of any size. Leading works vertically, between lines rather than between letters.
Wikipedia describes kerning as the process of adjusting the space between two specific characters or letterforms in a font, and points out that it is not to be confused with tracking. Its article on letter spacing defines tracking as an optically consistent typographical adjustment to the space between letters to change the visual density of a line or block of text, and notes that it is distinct from kerning. Leading is, in the same encyclopedia’s entry on the term, the space between adjacent lines of type, though the exact definition varies.
A quick way to remember the split is to ask what is being moved. If two letters are being nudged, that is kerning. If a whole word, line or paragraph is being loosened or tightened, that is tracking. If lines are being pushed apart or pulled together, that is leading. Each control answers a different problem, and fixing one does not fix the others.
Kerning: fitting letter pairs
Letters have different shapes, and a uniform gap between their bounding boxes does not look like a uniform gap to the eye. A capital A beside a capital V leaves a large triangle of empty space, while two straight-sided letters sit comfortably with much less. Kerning corrects for this by moving particular pairs closer together or further apart.
Poor kerning is not only an aesthetic problem. Wikipedia notes that, in the worst case, it may cause different words to be read than the ones intended. A famous kind of mistake happens when letters such as r and n are pushed so close together that they read as m. Clients and printers notice this kind of mistake long after a layout looks finished on screen.
Historically, the work was physical. In metal typesetting, according to the same Wikipedia article, kerning was labour-intensive and expensive because the matrices had to be physically modified, so it was used only on the combinations that needed it most, such as VA or AV. Digital fonts changed that: the spacing information is stored inside the font as kerning pairs, and software applies it automatically.
Automatic and manual kerning
Most applications offer two approaches. Metric kerning uses the pair values built into the font by its designer. Optical kerning ignores those values and instead adjusts spacing by looking at the shapes of adjacent letters. Both are useful starting points, and neither is perfect for every font or every word. Fonts differ widely in the quality of their built-in kerning, so a pair that looks right in one typeface may need a manual nudge in another.
On the web, kerning is controlled by the CSS property font-kerning. The MDN reference explains that kerning makes character spacing more uniform and pleasant to read by reducing white space between certain character combinations in well-kerned fonts. It also notes that with the default setting some browsers disable kerning on small text, since applying it could harm readability. Setting the value to normal forces the font’s kerning information to be applied.
Tracking: adjusting overall density
Tracking changes the spacing across every letter in a selection. A little extra space makes small text feel more open and easier to scan, while a little less makes a large heading feel tighter and more deliberate. Because large type exposes uneven gaps, headings are commonly tightened slightly, while small capitals and tiny labels are commonly opened up.
In CSS the control is letter-spacing. MDN says the property sets the spacing between text characters, with positive values spreading characters further apart and negative values bringing them closer together. It also warns that a very large negative value can make letters overlap until the word is unrecognisable, and that a very large positive value leaves letters looking like a series of unconnected characters. The same page adds that legible letter-spacing has to be judged case by case, because font families have different character widths.
Units are another trap. The Wikipedia article on letter spacing points out that different layout applications measure tracking in different fractions of an em, so the same numeric setting can be noticeable in one program and barely visible in another. Relative units such as em keep the spacing proportional to the font size, which is why they are a sensible choice on the web.
Tracking and case
Capital letters were designed to begin sentences and names, not to run in long strings, and their shapes leave less natural space between them. For that reason all-caps text generally benefits from a little added tracking, while lowercase text in body copy usually needs little or none. Tracking should also be applied evenly across a line: changing the spacing on only a few words to make a line fit creates a visible rhythm break that looks like an error.
Leading: setting the line gap
The word comes from hand typesetting. Wikipedia explains that thin strips of lead were inserted between lines of type in the composing stick to increase the vertical distance between them. The name stuck even though modern software has no lead in it.
In CSS the equivalent is line-height. The MDN reference says the property sets the height of a line box and is commonly used to set the distance between lines of text. It adds that desktop browsers use a default of roughly 1.2 for the normal value, depending on the font. MDN also states that a unitless number is in most cases the preferred way to set the value, because it avoids unexpected results from inheritance, and that it scales proportionately if the page is zoomed.
Line length and leading work together. Long lines need more generous leading so the eye can find the start of the next line, while short lines in narrow columns tolerate tighter settings. Typefaces with a large x-height, or with long ascenders and descenders, also want more room than compact designs. Headings set in several lines usually need tighter leading than the paragraphs below them, since large type at body-copy spacing looks loose and disconnected.
Spacing decisions of this kind feed directly into typographic hierarchy, where size, weight and space together tell the reader what to read first.
Spacing and accessibility
Spacing is also an accessibility matter. MDN recommends using a minimum line-height of 1.5 for main paragraph content, noting that this helps people with low vision and people with cognitive concerns such as dyslexia, as stated on the line-height reference.
The W3C goes further with Success Criterion 1.4.12 on text spacing. Its purpose is that users can adjust text spacing to make it easier to read, and it requires that no content or functionality is lost when line height is set to at least 1.5 times the font size and letter spacing to at least 0.12 times the font size. The point for designers is not to hard-code those values but to build layouts, containers and buttons that survive them: fixed-height boxes that clip overflowing text are the usual cause of failure.
Spacing a logo and wordmark
Kerning matters most where text is displayed largest and seen most often. A wordmark has no surrounding paragraph to hide uneven gaps, so every pair is examined closely. Designers who build a logo font choice into an identity usually kern the finished name by hand, pair by pair, rather than trusting the default values, and then check the result at small sizes, where tight pairs can collide.
The same habit applies to mockups. A packaging or stationery preview that shows letterforms at a realistic scale makes poor spacing obvious, which is one reason designers test type in context before approving it.
Common spacing mistakes
- Applying tracking to lowercase body copy, which breaks the natural connection between letters.
- Using a fixed pixel value for line height, so that the gap does not scale when text is resized.
- Kerning at one screen size and never checking another, so that pairs collide when the text is smaller.
- Changing spacing on individual words to fit a line, which leaves visible changes in rhythm.
- Letting a large heading inherit the leading of a paragraph, which makes it look loose.
Most of these are fixed by the same habit: set sensible defaults for the whole text style first, then correct only the specific pairs and lines that still look wrong.
Frequently asked questions
What is the difference between kerning and tracking?
Kerning adjusts the space between a specific pair of letters, while tracking adjusts the space between all letters in a selection. Kerning fixes uneven pairs; tracking changes overall density.
Is leading the same as line height?
They describe the same idea of vertical line spacing. Leading is the traditional print term for the space between lines, and line-height is the CSS property that sets the height of each line box on the web.
Should body text be kerned by hand?
Usually not. The kerning built into a well-made font is applied automatically, and manual kerning is reserved for large display text such as headings and logos, where uneven gaps are easy to see.
Does tracking affect accessibility?
Yes. Layouts should still work when users increase letter spacing, and extreme negative values can make words unreadable. Designing containers that can grow keeps text legible when users adjust spacing.
