Mastering Kerning Techniques for Professional Designers
Kerning is the invisible handshake between letters. When it’s right, nobody notices; when it’s off, everyone feels it.
Professional designers treat kerning as a discipline, not a checkbox. They build systems, test ruthlessly, and let rhythm guide the eye.
Understanding the Anatomy of Kerning
Kerning adjusts the perceived space between pairs of glyphs, not the uniform spacing tracked across a word. Its goal is optical balance, not mathematical equality.
Imagine the letter “T” and “o” in a serif face. The T’s right bar hangs in mid-air, creating a gap that feels larger than the gap between “o” and “n” even if both measure 50 units.
Designers compensate by pulling the o slightly under the T’s arm until the counterforms breathe evenly. The curve of the o tucks beneath the serif, restoring visual rhythm.
Optical vs. Metric Kerning
Metric kerning reads the font’s built-in kerning tables—pairs like “Av” set to –80 units. Optical kerning ignores those tables and calculates spacing on the fly using glyph outlines.
Use metric when the type designer’s judgment is trustworthy; switch to optical when combining fonts or when the tables feel sparse. InVariable fonts, optical kerning recalculates for each axis instance, keeping harmony across weights.
The Role of Counterform and Stroke
Rounded letters need more air than flat ones because their counters appear to contract. Diagonals slice visual space, so “A” and “V” require tighter values than “H” and “I”.
Set the pair “AV” in a bold sans, then cover the bottom half with paper. The top triangles almost touch; the bottom gap looks cavernous. Reduce the kerning until the top feels calm, then check the bottom again.
Building a Kerning Workflow
Start with a control string: “Hamburgefonstiv” plus your client’s name. This mix of straight, round, and diagonal shapes exposes weak pairs early.
Print the string at 8 pt, 12 pt, and 120 pt. Hang the sheets on a wall, step back three meters, and squint. Problems that hide on-screen jump out in ink.
Setting Up a Kerning Table
Create a spreadsheet column for each glyph, then list every possible neighbor. Delete pairs your project will never use—no “Qj” in a luxury skincare logo.
Assign priority tiers: Tier 1 covers brand names and headlines; Tier 2 covers body copy; Tier 3 is everything else. Budget your hours accordingly.
Using Plugins and Scripts
Glyphs users can run “Kernkraft” to auto-generate lists of critical pairs. The script weights frequency by language, so English gets “Th” while German gets “ch”.
In Figma, the “ Kern-On” plugin visualizes kerning groups as colored bars. Drag a bar to adjust every “L”-starting pair at once, saving hours on wide sans families.
Optical Illusions That Sabotage Kerning
Letters sit on a baseline, but the eye reads the center of gravity. A capital “S” appears to sink, so nudge it upward 10 units or the word feels heavy on the right.
Diagonal strokes create false margins. In “W” followed by “a”, the outer serifs form an invisible funnel that widens the gap. Tuck the “a” left until the funnel collapses.
The Poggendorff Effect in Type
This illusion makes straight lines appear misaligned when interrupted by a diagonal. Apply it to “K” and “v”: the v’s arm seems shifted right, so kern tighter to correct the phantom offset.
Test by drawing a thin vertical rule between the two glyphs. If the rule looks slanted, your kerning is still lying to the eye.
Overhanging Arches
Round capitals like “C” and “G” overhang the baseline and cap line. Pair them with flat letters and the white space above “G” next to “T” balloons.
Slide the “T” left until the outer curve of “G” almost kisses the stem. The overlap should equal the serif width, no more.
Kerning for Variable Fonts
Variable fonts interpolate kerning values along each axis. A “wght” axis from 200 to 900 can shrink counters by 30 %, demanding tighter pairs at the heavy end.
Designers must kern the extremes, then let the software interpolate intermediate masters. Skip the middle weights and diagonal strokes will jitter between 400 and 600.
Delta Kerning with Intermediate Masters
Add a master at 500 if the interpolation errors exceed 5 units. Delta kerning lets you insert corrective pairs only where the curve goes nonlinear.
Export a quick proof: animate the weight slider in a browser. Freeze the frame where spacing hiccups, note the axis value, and insert a delta there.
Testing Across Browsers
Chrome respects GPOS tables; Safari sometimes ignores them when “font-feature-settings” is inactive. Load your variable font in both, then screenshot the headline at 48 px.
Offset errors reveal themselves as twitching letter pairs during slow scroll. Record the screen at 60 fps and step through frames to catch micro-jumps.
Kerning in Multi-Script Projects
Latin “T” followed by Cyrillic “е” inherits no built-in pair. You must kern cross-script manually, referencing the Latin “Te” as a starting point.
Arabic glyphs connect, so kerning becomes a matter of exit/entry stroke alignment. A “سـ” followed by “تـ” needs optical overlap equal to the stroke width, not empty space.
Hangul and Syllable Blocks
Korean fonts contain pre-composed syllables, but CJK punctuation drifts. The Latin period beside a Hangul block appears to sink because the Hangul baseline sits higher.
Raise the period 30 units or tighten the left side-bearing of the preceding Hangul glyph. Test inside a bilingual menu card to keep the rhythm bilingual, not bifurcated.
Devanagari Headlines
Devanagari top-line (shiro-rekha) creates a horizontal bar that clashes with Latin caps. Place a Latin “A” after “भ” and the cap peak collides with the headline.
OpenType features like “dist” can lower the Latin cap automatically. If the font lacks it, kern the “A” down 40 units and increase its side-bearing to prevent overlap at 8 pt.
Automated Kerning vs. Human Judgment
Auto-kerning algorithms average 85 % accuracy on common pairs. They fail on brand names, crossbars, and any glyph redesigned for a logo.
Train a neural model on your past projects: export 200 kerned fonts as JSON, feed them to a small LSTM, and predict starting values for new fonts. You still hand-tune the top 50 pairs.
Quality Scoring with Regression
Score each pair by deviation from a golden master. A regression line plotting predicted vs. actual kerning reveals systematic bias—say, over-tightening diagonals by 8 %.
Offset the model’s diagonal coefficient and re-run. One line of code can save three hours on the next font.
When to Ignore the Algorithm
Logos break every rule. The “fe” in “Coffee” might kern to –120 to mimic a steam wisp, while the body copy stays at –10. Save this pair as a stylistic set, not the default.
Store logo-specific kerning in a separate .glyphs file. Merge it only for export to prevent polluting the retail font.
Kerning for Responsive Web Type
CSS “font-kerning: normal” relies on the browser’s rasterizer. At 14 px on a 1× screen, sub-pixel positioning rounds pairs to whole pixels, snapping “To” from –1 to 0.
Use “letter-spacing: –0.01em” as a global corrective for low-DPI screens. Increase to –0.02em on Windows Legacy ClearType, which inflates spacing.
Media-Query Kerning
Deploy variable fonts with a “opsz” axis. At optical size 8, counters clog; tighten “AV” by an extra –15 units via CSS custom property.
Swap the property at 16 px back to default. One line in a media query keeps the headline crisp on phones and relaxed on desktops.
Sub-Pixel Hinting Traps
Hinting instructions can override kerning tables at small sizes. In FontLab, disable “Ignore Kerning at Sizes Below 9 px” to preserve pairs.
Test on an actual Windows machine; emulation tools smooth too much. Screenshot grayscale and compare against macOS to verify parity.
Kerning Checklist for Launch Day
Export a PDF with every master, every axis location, and every language you support. Convert to outlines and run a javascript that measures black-to-black distances.
Flag any pair that deviates more than 3 % from the intended value. Fix, re-export, and re-run until the script returns zero errors.
Final Stress Test
Set a paragraph in narrow columns, full-justified, with hyphenation off. Ragged edges expose unbalanced kerning better than centered headlines.
Print on cheap office paper with a laser printer at 600 dpi. Ink bleed adds 0.02 mm, mimicking worst-case newsprint and revealing pairs that close up.
Sign off only after a non-designer reads the text aloud without stumbling. If they pause at a word, the kerning—not the spelling—is usually the culprit.