Kerning vs Tracking vs Leading: Typography Spacing Explained
Spacing is what separates professional typography from amateur text. Two layouts can use the same typeface at the same size, yet one reads effortlessly while the other feels awkward and amateurish. The difference is almost always in the spacing. Three concepts — kerning, tracking, and leading — control the invisible architecture of type, governing the gaps between individual letters, the uniform spacing across words and lines, and the vertical breathing room between rows of text. Together, they form the foundation of typography spacing.
These three terms are distinct, but they work in concert. A designer who adjusts one without considering the others will produce text that feels unbalanced. Understanding how kerning, tracking, and leading relate to each other — and when to adjust each — is essential for anyone working with type, whether in print design, web development, or brand identity.
This guide defines each term clearly, explains how they differ, and covers practical application in both CSS and design software. By the end, you will know exactly when and how to adjust typography spacing for any context.
What Is Kerning?
Kerning is the adjustment of space between two specific characters. Unlike other spacing controls that apply uniformly, kerning targets individual letter pairs where the default spacing creates an optical imbalance. The goal is to make the spacing between letters appear visually even, even when the mathematically equal spacing does not achieve that result.
The need for kerning arises from the geometry of letterforms themselves. Letters are not uniform rectangles — they have angles, curves, overhangs, and open sides that create uneven pockets of white space when placed next to certain other characters. The uppercase “A” and “V” placed side by side, for example, create a wide triangular gap between their angled strokes that makes them appear too far apart, even when the spacing is technically the same as between other letters. Similarly, the pairs “To,” “LT,” “Wa,” and “Ye” all produce awkward gaps that kerning corrects.
Professional typefaces include built-in kerning tables — data embedded in the font file that specifies spacing adjustments for hundreds or even thousands of character pairs. A well-crafted typeface may contain over 1,000 kerning pairs, each one the product of a type designer’s careful optical judgment. When you set text in a quality font with kerning enabled, most of these adjustments happen automatically.
Metric vs Optical Kerning
Design software typically offers two kerning modes. Metric kerning (sometimes called Auto kerning) uses the kerning tables built into the font file. This is the default in most applications and respects the type designer’s intended spacing. For professionally designed typefaces, metric kerning produces excellent results because the designer has already optimized the most common problematic pairs.
Optical kerning ignores the font’s built-in tables and instead relies on the software’s algorithm to analyze the shapes of adjacent characters and calculate appropriate spacing. Optical kerning can be useful when working with fonts that have poor or missing kerning tables, when mixing characters from different typefaces on the same line, or when setting text in unusual combinations that the type designer did not anticipate.
In most professional workflows, metric kerning is the better default. Switch to optical kerning only when the built-in tables are insufficient — typically with free or poorly designed fonts. For headline and display text, manual kerning adjustments on top of either mode are common and expected.
When to Kern Manually
Body text set at standard reading sizes rarely needs manual kerning. The built-in kerning tables handle the work, and at small sizes, minor spacing imperfections are imperceptible to the reader. But as text gets larger, spacing errors become magnified. A gap that is invisible at 12 pixels becomes glaring at 72 pixels.
Headlines, logos, hero text, and any type set at display sizes should be manually kerned. This is a non-negotiable step in professional design. Even the best kerning tables cannot account for every possible combination of characters, weights, and sizes. A designer who sets a headline without reviewing the kerning is leaving the quality of their work to chance.
Logo design is where kerning matters most. A wordmark lives at every size from a favicon to a billboard, and it will be seen millions of times. Every letter pair must be optically perfect. This is why experienced logo designers spend significant time on kerning adjustments that may measure in fractions of a point.
What Is Tracking?
Tracking is the uniform adjustment of spacing across an entire word, line, or block of text. While kerning addresses specific letter pairs, tracking increases or decreases the space between all characters by the same amount. In CSS, this property is called letter-spacing. In design software, it is typically labeled “Tracking” and measured in units of 1/1000 of an em.
Positive tracking adds space between all characters, creating a looser, more open texture. Negative tracking removes space, pulling characters closer together for a tighter, more compact appearance. The key distinction from kerning is that tracking is global — it does not discriminate between letter pairs that need adjustment and those that do not.
When to Adjust Tracking
Several common scenarios call for tracking adjustments. The most frequent is all-caps text. Uppercase letters are designed to sit alongside lowercase characters, where the ascenders and descenders create visual separation and rhythm. When you remove the lowercase letters and set text in all caps, the characters can feel cramped. Adding positive tracking — typically between 50 and 200 units depending on the typeface and size — opens the text and improves readability. This is why well-designed serif and sans-serif stylesheets almost always include increased letter-spacing for capitalized text.
Large headlines can often benefit from slightly tightened tracking, especially in sans-serif typefaces. At display sizes, the default spacing can feel loose and disconnected. Reducing tracking by a small amount — perhaps -10 to -30 units — gives headlines a more cohesive, intentional appearance. This must be done carefully, as excessive negative tracking causes characters to collide.
Small text, conversely, needs more breathing room. At sizes below 10 pixels or 8 points, the reduced physical space between characters can cause them to blur together. A modest increase in tracking improves legibility by ensuring each character has enough surrounding space to remain distinct. This is particularly important for captions, footnotes, legal text, and other contexts where type is set very small.
Some typefaces are designed with inherently tight or loose spacing, and tracking adjustments compensate for these tendencies. A condensed typeface may need additional tracking at body text sizes to prevent characters from feeling crowded. A wide, generously spaced display face may need tighter tracking when used in a context that demands density.
What Is Leading?
Leading is the vertical spacing between the baselines of consecutive lines of text. The term originates from the era of metal typesetting, when printers physically inserted thin strips of lead between rows of type to increase the vertical gap. The pronunciation reflects this origin — “leading” rhymes with “bedding,” not “bleeding.”
In modern design software, leading is typically called line-spacing or line-height. In CSS, the property is line-height. Regardless of the term used, the concept is the same: leading controls how much vertical space separates one line of text from the next.
The default leading in most applications is approximately 120% of the font size. Set your type at 20 pixels, and the default line-height will be around 24 pixels, leaving 4 pixels of space between the bottom of the descenders on one line and the top of the ascenders on the next. This 120% ratio is a reasonable starting point but rarely the optimal value for any specific design.
When to Increase Leading
Long lines of text require more leading. When a line extends to 75 or more characters, the reader’s eye must travel a considerable horizontal distance before returning to the left margin. If the lines are too closely stacked, the eye may land on the wrong line during that return sweep. Increasing the leading provides clearer separation between rows and reduces this risk. This relationship between line length and line spacing is one of the most important principles in readability.
Light-weight typefaces benefit from additional leading as well. A font set at 300 or lighter weight produces thin, delicate strokes that can feel overwhelmed when lines are stacked tightly. More vertical space gives each line room to breathe and preserves the elegance that a light weight is meant to convey.
Typefaces with a tall x-height also tend to need more leading. A generous x-height means the body of each lowercase letter occupies more of the vertical space, reducing the visual gap between lines even when the measured leading is standard. Fonts like Inter, Roboto, and other screen-optimized designs often require line-height values of 1.5 to 1.6 for comfortable reading in body text.
When to Decrease Leading
Display type and large headlines can benefit from tighter leading. When text is set at 48 pixels or above, the default line-height creates cavernous gaps between lines that make multi-line headlines feel disconnected. Reducing leading to 100-110% of the font size pulls the lines together into a cohesive visual unit. This is standard practice for hero sections, posters, and any large-scale typographic composition.
Compact layouts — sidebars, cards, navigation menus, and other space-constrained UI elements — sometimes require reduced leading to fit content within a fixed area. The trade-off is readability, so tighter leading in these contexts should be accompanied by shorter line lengths and fewer lines of text.
Kerning vs Tracking: The Key Difference
The most common point of confusion in typography spacing is the distinction between kerning and tracking. Both adjust horizontal spacing between characters, but they operate at fundamentally different levels.
Kerning is pair-specific. It addresses the spacing between two particular adjacent characters — “AV,” “To,” “We” — where the shapes of those specific letters create an optical problem. Kerning does not affect the rest of the text. It is a surgical adjustment.
Tracking is global. It increases or decreases the spacing between all characters in a selection by the same amount, regardless of what those characters are. It is a broad adjustment that changes the overall density and texture of the text.
They are not interchangeable. Increasing tracking cannot fix a bad kerning pair, because tracking adds the same amount of space everywhere — the problematic gap between “A” and “V” remains proportionally larger than the gaps between other pairs. Conversely, kerning individual pairs cannot achieve the uniform density change that tracking provides for an all-caps heading.
In practice, the two work together. A professional workflow for setting a headline typically involves first adjusting the tracking to establish the overall spacing density, then fine-tuning individual kerning pairs to correct any optical imbalances. The tracking sets the general tone; the kerning perfects the details.
How Spacing Affects Readability
Typography spacing is not decorative — it directly affects how easily text can be read and understood. Research in reading ergonomics consistently shows that spacing adjustments have a measurable impact on reading speed, comprehension, and reader comfort.
The relationship between line length, tracking, and leading is interdependent. Optimal body text typically follows these parameters: a line length of 45-75 characters, leading of 1.4 to 1.6 times the font size, and tracking at or near the default value. When any one of these variables changes, the others should be reconsidered.
For body text, the safest approach is restraint. The typeface designer has already calibrated the default spacing for readability at text sizes. Tracking adjustments to body copy should be minimal — a few units at most — and only when the typeface or context demands it. Over-tracking body text is one of the most common amateur mistakes, producing text that looks styled but reads poorly.
Display text operates under different rules. At large sizes, the designer is free to manipulate spacing more aggressively for aesthetic effect. Tight tracking on a bold headline, generous leading between stacked lines of a pull quote, carefully kerned pairs in a paired typeface lockup — these are the adjustments that elevate professional work above templated defaults.
The key principle is that spacing should serve the reader, not the designer’s visual preference. When spacing makes text harder to read, it has failed its primary purpose, regardless of how stylish it looks.
Spacing in CSS
CSS provides direct control over all three spacing properties, though the terminology differs from design software conventions.
Letter-Spacing (Tracking)
The letter-spacing property in CSS corresponds to tracking. It accepts any CSS length value and adds (or removes, with negative values) that amount of space between every character in the element.
/* Positive tracking for all-caps text */
.uppercase-heading {
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* Slight negative tracking for large headlines */
.hero-title {
font-size: 4rem;
letter-spacing: -0.02em;
}
/* Increased tracking for small text */
.caption {
font-size: 0.75rem;
letter-spacing: 0.04em;
}Using em units for letter-spacing is best practice because the spacing scales proportionally with the font size. A value of 0.05em adds 5% of the current font size between each character, producing consistent results regardless of the element’s text size.
Line-Height (Leading)
The line-height property controls leading. It accepts unitless numbers (preferred), percentages, or fixed length values.
/* Recommended: unitless value for body text */
body {
font-size: 1rem;
line-height: 1.5;
}
/* Tighter leading for headings */
h1 {
font-size: 3rem;
line-height: 1.1;
}
/* More generous leading for wide containers */
.wide-column p {
max-width: 80ch;
line-height: 1.7;
}Unitless values are preferred over fixed units because they scale with the element’s font size and are inherited predictably by child elements. A line-height: 1.5 on the body means every element inherits a line-height that is 1.5 times its own computed font size, rather than a fixed pixel value.
Font-Kerning
The font-kerning property controls whether the browser uses the font’s built-in kerning tables.
/* Enable kerning (default in most browsers) */
body {
font-kerning: auto;
}
/* Force kerning on */
.headline {
font-kerning: normal;
}
/* Disable kerning */
.monospace-code {
font-kerning: none;
}Most modern browsers enable kerning by default for proportional fonts. The font-kerning: normal declaration explicitly enables it, which can be useful as a safeguard. Setting font-kerning: none disables kerning, which is appropriate for monospace text or specific contexts where uniform character width is required. CSS does not provide a mechanism for manual per-pair kerning adjustments — that level of control requires design software or custom SVG text.
Spacing in Design Software
Every major design application provides controls for kerning, tracking, and leading, though the interfaces and keyboard shortcuts vary.
Adobe InDesign and Illustrator
In Adobe’s design applications, kerning and tracking are controlled from the Character panel. Kerning is the field between two letters (place your cursor between two characters to adjust), while tracking applies to selected text. Leading is the field directly below the font size.
Keyboard shortcuts: place the cursor between two letters and press Alt/Option + Left/Right Arrow to kern in increments of 20 units. Add Cmd/Ctrl to kern in increments of 100 units. To adjust tracking, select the text first, then use the same shortcuts. For leading, select the text and press Alt/Option + Up/Down Arrow.
Figma
Figma labels tracking as “Letter spacing” and leading as “Line height” in the design panel on the right side. Both accept numeric values and percentages. Figma does not provide a dedicated kerning control — it relies on the font’s built-in kerning tables. For manual kerning in Figma, designers typically split text into separate layers and position them manually, which is a workaround rather than a true kerning feature.
Adobe Photoshop
Photoshop’s Character panel mirrors the layout of InDesign and Illustrator. Kerning, tracking, and leading fields are arranged in the same positions, and the same keyboard shortcuts apply. Photoshop supports both metric and optical kerning modes, selectable from the kerning dropdown in the Character panel.
Across all these tools, the principles remain the same: use tracking to set the overall spacing density, use leading to control vertical rhythm, and use kerning to refine individual pairs in display text. The software is the mechanism; the typographic judgment is yours.
Common Spacing Mistakes
Even experienced designers fall into spacing traps. Recognizing these common errors is the fastest path to improving your typographic work.
Not Kerning Headlines
This is the most frequent and most visible mistake. A designer selects a typeface, sets a headline at 48 pixels or larger, and never checks the letter spacing. At display sizes, kerning problems are immediately apparent to anyone with a trained eye — and increasingly noticeable even to general audiences. Every headline, title, and large-scale text element should be manually kerned. There are no exceptions to this rule in professional work.
Over-Tracking Body Text
Adding tracking to body text is rarely necessary and often harmful. Some designers increase letter-spacing on paragraph text for a “designed” look, producing text that feels airy and modern at a glance but becomes fatiguing to read over more than a few sentences. Body typefaces are designed with their default spacing optimized for sustained reading. Trust the type designer’s work and leave body tracking at or very near zero.
Too-Tight Leading in Body Copy
Reducing line-height to fit more content into a space is a false economy. Tight leading forces the reader’s eye to work harder to track from the end of one line to the beginning of the next, increases the chance of re-reading the same line, and creates a dense, intimidating text block that discourages reading altogether. Body text should never be set below 1.4 line-height, and values of 1.5 to 1.6 are generally safer.
Ignoring Spacing in Logos
A wordmark that has not been kerned is an unfinished logo. The default spacing in any font was designed for running text, not for a brand name that will be viewed in isolation at every conceivable size. Logo typography requires meticulous kerning — and often tracking adjustments as well — to achieve the optical perfection that a brand identity demands. This is one of the core skills covered in any serious study of graphic design principles.
Applying the Same Spacing Everywhere
A single set of spacing values cannot serve every context in a design system. Body text, headings, captions, navigation labels, and display type all have different optimal spacing parameters. Setting a global letter-spacing or line-height value and applying it uniformly across a website or layout ignores the fundamental reality that spacing requirements change with size, weight, and context. Each typographic level in your hierarchy should have its own calibrated spacing values.
FAQ
What is kerning?
Kerning is the adjustment of space between two specific characters in a piece of text. It corrects optical imbalances caused by the shapes of adjacent letters — such as the gap between “A” and “V” or “T” and “o” — to make spacing appear visually uniform. Kerning is most important at large display sizes, in headlines, and in logo design, where spacing imperfections are clearly visible.
What is the difference between kerning and tracking?
Kerning adjusts the space between a specific pair of adjacent characters, while tracking adjusts the spacing uniformly across all characters in a selected range of text. Kerning is a surgical, pair-by-pair correction; tracking is a global change that affects every character equally. In practice, designers typically set tracking first to establish overall spacing density, then kern individual pairs to fix any remaining optical issues.
What is leading in typography?
Leading is the vertical distance between the baselines of consecutive lines of text. The term comes from the strips of lead metal that printers placed between rows of type in the letterpress era. In CSS, leading is controlled by the line-height property. In design software, it is typically labeled as leading or line-spacing. Proper leading ensures that lines of text are spaced far enough apart for comfortable reading without wasting vertical space.
What is the ideal line spacing for body text?
For most body text, a line-height between 1.4 and 1.6 times the font size produces comfortable, readable results. The default of 1.2 (120%) built into many applications is generally too tight for sustained reading on screens. Longer line lengths, lighter font weights, and typefaces with tall x-heights all benefit from values toward the higher end of this range. Display text and headlines can be set much tighter — often between 1.0 and 1.2 — because they are read as short bursts rather than continuous paragraphs.
Should I kern body text?
Manual kerning of body text is unnecessary in nearly all cases. At body text sizes (typically 14-18 pixels for screen or 9-12 points for print), the built-in kerning tables of a professional typeface handle spacing effectively, and minor imperfections are invisible to the reader. Manual kerning should be reserved for display text — headlines, titles, logos, and any type set at large sizes where spacing errors become visible. Ensure that font-kerning is enabled in your CSS so the browser applies the font’s automatic kerning, and focus your manual kerning effort on the text that readers will see at the largest sizes.
