You set a headline at 120 pixels. The typeface is excellent — you chose it for exactly this moment. The weight is right, the case is right, the words say what they need to say. And yet something is off. The spacing between certain letter pairs looks uneven, almost amateurish. The "T" and the "o" are drifting apart. The "A" and "V" are colliding. The word reads correctly, but it does not look correct.
You are seeing the failure of automatic kerning at display sizes. It is one of the most common and most visible craft problems in visual design, and fixing it is not optional. At 16 pixels, loose spacing is invisible. At 120 pixels, it is the first thing a trained eye notices — and an untrained eye senses without knowing why.
This is the second installment of Designer's Toolkit, and it covers a skill that no software will reliably do for you: optically kerning display type by hand.
Why Auto-Kerning Fails at Large Sizes
Every digital typeface ships with a kern table — a set of predefined spacing adjustments for specific letter pairs. When you type "AV" in any design tool, the software consults that table and tightens the pair automatically. This is metrics kerning, and at body text sizes it works well. Type designers spend significant time building these tables, and at 14 to 20 pixels, their judgments hold.
The problem is scale. Kern tables are optimised for reading sizes, not for display. When you scale type to headline proportions — anything above roughly 40 pixels on screen, or 24 points in print — two things happen. First, the absolute pixel distance between letters increases proportionally, making spacing inconsistencies that were imperceptible at small sizes suddenly glaring. A gap that measured 2 pixels at body size now measures 15 pixels at headline size. Second, the visual weight shifts. At display sizes, you stop reading letters as phonetic units and start seeing them as shapes — as geometric relationships between forms. The spacing needs to satisfy the eye as composition, not just as text.
This is why professional typographers, lettering artists, and senior designers kern display type by hand. Not because the font is poorly made. Because the font was made for a different context.
Optical vs. Metrics vs. Auto: Three Modes, Three Jobs
Before adjusting anything, you should understand what your design tool is already doing. Most applications offer three kerning modes, and they behave differently.
Metrics kerning uses the font's built-in kern table. It applies the pair-specific adjustments the type designer defined. This is the default in most tools and the right choice for body text. Trust the type designer at reading sizes — they have tested those pairs more thoroughly than you will.
Optical kerning is the software's attempt to space letters by analysing their shapes algorithmically. Adobe's optical kerning engine evaluates the area between adjacent glyphs and adjusts spacing to equalise it. This can be useful as a starting point for unusual fonts or for typefaces with incomplete kern tables, but it is a machine approximation. It does not understand the design intent of the letterforms.
Manual kerning is what you apply on top of either mode — custom adjustments, pair by pair, using your eyes as the instrument. For display type, this is where the real work happens. Set your base to metrics or optical (depending on the typeface), then override individual pairs until the spacing looks even.
The principle underlying all three is the same: the goal of kerning is not equal distance between letters but equal perceived space. Two straight-sided letters like "H" and "I" need more measurable distance between them than two round letters like "O" and "C," because the curves of round letters create open area that the eye reads as space. Kerning is the act of balancing visual area, not linear measurement.
The Optical Kerning Process
Here is the method. It is manual, it is slow relative to doing nothing, and it produces results that are unambiguously better. Budget five to ten minutes per headline for your first attempts. With practice, you will do it in two.
Step 1: Set Your Baseline
Type your headline in the target typeface, weight, and size. Set the kerning mode to Metrics. Set tracking (letter-spacing) to zero. You want to see the font's default spacing before you touch anything, because your adjustments will be relative to this starting point.
A note on tracking versus kerning, since the terms are frequently confused: tracking adjusts the spacing uniformly across all letters in a text block. Kerning adjusts the spacing between a specific pair of letters. They are different operations with different purposes. For display type, you may apply a small tracking adjustment to the entire headline first (tight display faces sometimes benefit from -1% to -2% tracking at very large sizes), but then you kern individual pairs on top of that global adjustment. Tracking is the tide; kerning is the individual waves.
Step 2: The "HnH" Method
Before kerning your actual headline, calibrate your eye. Type the characters "HnHoHdHpH" — or any sequence that alternates a straight-sided capital H with the lowercase letters from your headline. The H provides a consistent vertical reference. The alternating rhythm lets you see how each letter occupies space relative to a known standard.
Look at the gaps between the H and each letter. They should feel visually equal — not metrically equal, but perceptually balanced. If the space around the "o" feels tighter than the space around the "d," you are seeing the difference in their sidebearings. This exercise trains your eye to distinguish between measured distance and perceived distance, which is the entire skill of optical kerning.
Step 3: Work Left to Right, One Pair at a Time
Return to your actual headline. Place your cursor between the first two characters. Ask one question: does the space between these two letters feel consistent with the space between the next two letters? If not, adjust. Move to the next pair. Repeat.
Use keyboard shortcuts for speed. In most design tools, placing the cursor between two characters and pressing Alt/Option + Left Arrow tightens the pair; Alt/Option + Right Arrow loosens it. Each press typically adjusts by 10 or 20 units (depending on the tool). Add Shift for larger increments.
Work the full headline left to right, then evaluate the whole word again. You will often need a second pass — fixing one pair changes the context for its neighbours.
Step 4: The Squint Test
Step back from your screen — physically or mentally. Squint at the headline, or blur your vision deliberately. You are trying to suppress letter recognition and see only the rhythm of dark and light. The black strokes are the dark; the spaces between them are the light. If the rhythm is even — a consistent pulse of dark-light-dark-light — the kerning is good. If one gap screams brighter than the others, that pair needs tightening. If two letters appear to merge into a dark blob, they need loosening.
Some designers take a screenshot and apply a Gaussian blur in their image editor to achieve the same effect mechanically. Others flip the type upside down, which disrupts letter recognition and forces shape-based evaluation. Both techniques work. The point is to bypass your brain's linguistic processing and evaluate the type as pure form.
Step 5: Check at Multiple Sizes
Your headline will likely appear at more than one size — the hero placement, a social media crop, a mobile viewport. After kerning at your primary size, scale the text up and down and verify that the spacing still holds. Kerning that looks perfect at 120 pixels may need slight adjustment at 64 pixels, because the relationship between stroke width and spacing changes with scale.
Common Problem Pairs
Certain letter combinations fail under auto-kerning so reliably that experienced typographers check them first. Knowing these pairs accelerates the process — instead of evaluating every adjacent pair from scratch, you go straight to the known trouble spots.
Diagonal meets vertical: AV, AW, AT, AY, VA, WA, TA, YA. The diagonal strokes of A, V, W, and Y create triangular negative space against vertical neighbours. Auto-kerning consistently undercorrects these. The fix is aggressive tightening — often more than you initially expect. The letters should feel like they share the same column of space, not like they are leaning away from each other.
Diagonal meets round: To, Ty, Te, Yo, We. The crossbar of the T (or the diagonal of Y and W) creates a shelf of white space above the adjacent lowercase letter. This is where optical kerning earns its name — you are visually tucking the lowercase letter under the overhang of the capital, balancing the area above the letter against the area beside it.
Straight meets round: HO, DO, OI, db, qp. The flat side of a straight letter against the curve of a round one creates an optical gap that does not exist between two straight letters. Tighten these pairs slightly so that the round letter's curve reaches into the space that a straight letter would fill.
The rn/m problem. At large sizes, the pair "rn" can read as "m" if kerned too tightly — or look disjointed if too loose. This is a legibility issue, not just an aesthetic one. Check any word containing "rn" (kern, turn, burn) at display size and verify that the letters remain distinct without drifting apart.
L followed by T, V, Y, or W. The horizontal bar of the L and the diagonal or vertical stroke of the following letter create a wide pocket of space in the lower right. This pair almost always needs tightening.
[Visual team note: Create a before/after comparison graphic showing the word "AVATAR" set in a geometric sans-serif at 96px. The "before" state uses default metrics kerning — the AV, AT, and AR pairs will show visible spacing problems. The "after" state shows the same word with optical kerning applied. Annotate each adjusted pair with its kerning value shift.]
Tool-Specific Tips
The principles above are universal. The mechanics differ by tool.
Figma
Figma exposes per-character kerning through the text panel, but the keyboard shortcut is the practical workflow: click between two characters to place the cursor, then Option + Left/Right Arrow to adjust in increments of 10 units. Add Shift for 100-unit jumps. Figma uses metrics kerning by default and does not offer an optical kerning mode — you are always working from the font's kern table plus your manual overrides.
One Figma-specific consideration: if you are kerning within a component that will be used at multiple sizes (say, a headline component with size variants), kern at the largest variant first and test smaller variants separately. Figma scales kerning values proportionally, but the perceptual result can shift at smaller sizes.
Illustrator
Illustrator offers all three modes — Metrics, Optical, and manual — accessible through the Character panel or the OpenType panel. For display type, a reliable workflow is to set the kerning mode to Optical first (which gives you Adobe's algorithmic spacing as a baseline), then override individual pairs manually. Illustrator's optical kerning engine is more mature than most; it produces a better starting point than metrics kerning for many display-oriented typefaces.
Use the same Alt/Option + Arrow shortcut. In Illustrator, each press adjusts by 20/1000 em by default. You can change this increment in Preferences > Type > Kerning to suit your precision needs.
Browser-Based (CSS)
CSS does not support per-pair kerning natively. The `letter-spacing` property is tracking, not kerning. However, you do have control over whether the browser uses the font's kern table: `font-kerning: normal` enables it (default in most browsers), `font-kerning: none` disables it.
For display type on the web, the pragmatic approach is to enable `font-feature-settings: "kern" 1;` to ensure the font's kerning data is active, then apply careful `letter-spacing` to the overall headline for general tightness. For critical display moments — a hero headline, a logo lockup — consider setting the type as an SVG or using a tool like Kerntype or Lettering.js to control spacing per character. It is more work, but a hero headline is often the most-viewed typographic moment on the entire site.
Real-World Analysis: The FedEx Logotype
The FedEx logotype, designed by Lindon Leader at Landor in 1994, is one of the most studied pieces of display typography in branding. Its kerning is not merely "good" — it is structurally essential, because the spacing between the E and the x creates the famous hidden arrow in the negative space.
Look at the letter pairs. The F and the e are tightened well beyond what any kern table would suggest — the crossbar of the F almost touches the top of the e. This aggressive tightening is necessary because the wide vertical stroke of the F creates a large block of white space on its right side; without extreme compensation, the Fe pair would look gapped relative to the rest of the word.
The E and the d in "Fed" are similarly tight. The horizontal bars of the E reach toward the curve of the d, filling the negative space that would otherwise accumulate. But the critical pair is the E and x at the junction of the two colour blocks. The spacing here is calibrated to the pixel so that the negative space between the E's lower horizontal bar and the x's diagonal stroke forms a clean, forward-pointing arrow shape. Tighten the pair by five units and the arrow collapses. Loosen it by five units and the arrow dissolves into ambiguous space.
This is kerning as design decision, not as correction. Leader was not fixing a font's default spacing — he was using spacing as a compositional tool to embed meaning in the negative space between letters. It is an extreme example, but it illustrates the principle: at display sizes, the space between letters is not empty. It is material.
[Visual team note: Include the FedEx logotype with annotation lines showing the arrow-forming negative space between E and x. Consider a second diagram showing the same letters at metrics-default spacing to illustrate how the arrow disappears without manual kerning intervention.]
Practice Exercise: Kern This
Here is a challenge you can try right now. Open your design tool of choice and set the following words, each on its own line, in a geometric sans-serif (Futura, Montserrat, or similar) at 80 to 120 pixels, all caps:
WAVELENGTH TYPOGRAPHY AVOCADO
Set the kerning to Metrics. Do not adjust anything yet. Take a screenshot — this is your "before."
Now kern each word manually using the process described above. Work left to right, pair by pair. Use the squint test after each pass. Pay special attention to these pairs:
In WAVELENGTH: the WA, AV, VE, LE, and GT pairs. The W-A-V sequence is a triple diagonal meeting — one of the hardest combinations to space evenly. The LE pair will feel loose compared to its neighbours because of the L's horizontal bar.
In TYPOGRAPHY: the TY, YP, PO, and PH pairs. The T and Y are both open at the bottom, creating a double-valley of white space. The PO pair will need tightening because the curve of the O does not fill the rectangular space that a straight letter like I would.
In AVOCADO: the AV pair (always problematic), the VO pair (diagonal meets round), the CA pair (round meets diagonal), and the final DO pair (round meets round — which should actually be relatively even at default spacing, giving you a calibration reference).
Take a second screenshot after kerning. Compare. The difference will not be subtle.
If you want to benchmark yourself, the browser-based game Kern Type (kerntype.com) lets you kern pairs and scores your accuracy against professional settings. It is the best five-minute typographic warm-up available online.
The Takeaway
Optical kerning for display type is not a finishing touch. It is a foundational craft skill — the typographic equivalent of colour correction in photography or gain staging in audio. The tools will not do it for you reliably, the defaults are not good enough at large sizes, and the difference between kerned and un-kerned display type is the difference between professional work and work that looks almost professional.
The method is straightforward: set your baseline, calibrate your eye with the HnH technique, work pair by pair, squint-test for rhythm, and verify across sizes. The problem pairs are predictable. The tools all support manual overrides. The only variable is whether you decide the craft is worth five minutes per headline. It is.
Designer's Toolkit is a biweekly series from WeLoveDaily exploring the tools, techniques, and workflows that working designers actually use. Next up: Responsive Typography Scales — how to build a type system that adapts across breakpoints without arbitrary values.
WeLoveDaily is a design publication for people who care about how things look, work, and feel.