Mastering Kerning in Digital Fonts
Kerning adjusts the horizontal space between specific pairs of letters so they read as a single, even texture. Poor kerning destroys readability, while subtle, precise spacing turns good type into invisible, effortless reading.
Digital fonts ship with hundreds of pre-set kerning pairs, yet every new layout introduces fresh collisions. Mastering kerning means knowing when to trust the font, when to override it, and how to judge spacing by eye rather than by number alone.
Understanding the Anatomy of a Kerning Pair
A kerning pair is not a character; it is the invisible rectangle that surrounds two adjacent glyphs. The goal is to balance the counter-spaces inside each letter with the white channel that flows between them.
Uppercase T followed by lowercase o is the classic crash-test: the T’s right stem hangs in mid-air while the o’s left curve drifts away, creating a visual canyon. Reducing the pair’s advance width by 30–50 units pulls the o back under the T’s crossbar so the word “Today” feels like one unit instead of two glued blocks.
Memorize five troublemakers—AV, To, Tr, We, Ya—and you will spot 80 % of headline kerns before you even measure them.
Optical vs. Metrics Kerning: Picking the Right Engine
Adobe apps offer two buttons: Metrics uses the font’s built-in table; Optical ignores it and recalculates every pair from scratch. Optical feels magical until you set body text in a well-hinted serif; then it over-tightens, creating a dotted line of crowded letters.
Test both engines at the exact size you will ship. If the designer manually kerned the font, Metrics almost always wins; if the font is open-source or early-stage, Optical can fix lazy tables in seconds.
When to Switch Engines Mid-Document
Set headlines in Optical for even color, then switch to Metrics at 14 pt and below to preserve the designer’s micro-adjustments. InDesign’s Find/Change lets you target point-size ranges so the swap happens automatically across 200 pages.
Reading Distance and Kerning Scale
A billboard letterform 12 m away needs looser kerns than the same word on a phone 30 cm from the eye. Retina screens compress white space, so mobile UIs often require +10 to +20 units of extra breathing room.
Print a laser proof at 100 %, then back away until the text becomes slightly hard to read; if you still see white gaps, the kerning is too loose for real-world viewing.
Quick Office-Wall Test
Blue-tape the print to the wall, stand at the average viewing distance for your medium, and squint until the letter shapes blur. The remaining dark spots are collisions; mark them with a red pen, adjust, and reprint once.
Kerning for Variable Fonts
Variable fonts interpolate kerning tables along each axis, but the delta values can slide out of sync at extreme widths. A compressed wght=900 style may need an extra –20 units on every diagonal pair to stop A-V from touching.
Adobe’s Variable Font Preview panel exposes the gvar table in real time; scrub the slider and watch pairs like Ty or Wo snap together, then add a new kerning master at that axis location.
Exporting Delta Kerns
FontMake lets you merge delta kerns into the static instances so older browsers that don’t support variable axes still get the fixed spacing. Compile once, serve two formats, and never maintain duplicate files.
Kerning in CSS: Beyond letter-spacing
The letter-spacing property adds or removes a fixed value after every glyph, so it can’t fix a single A-V crash without ruining the rest of the word. Instead, use font-kerning: normal to honor the built-in table, then target specific pairs with inline spans and margin-left.
For React or Vue projects, create a utility class .kern-AV{margin-left:-0.04em} and inject it via a regex that finds every “AV” string in your heading layer. The result is surgical, not global, and survives translation plugins.
Subpixel Kerning on Retina Screens
WebKit rounds kerning values to the nearest quarter-pixel, so a –0.03 em adjustment may collapse to zero. Test in Safari at 1× and 2× densities; if the kern vanishes, bump to –0.0625 em to force a half-pixel shift that survives rounding.
Script and Swash Exceptions
Swash capitals extend far past their side-bearings, so the default kerning table often ignores them. Open the glyph panel, activate the swash stylistic set, and manually kern T_swash-a_minimal so the tail arcs over the lowercase bowl without clipping the ascender.Scripts like Bickham Script need negative kerns on 70 % of pairs; otherwise the flowing strokes never touch, breaking the faux-handwriting illusion. Start with –50 units on every uppercase-to-lowercase transition, then tighten or loosen by eye.
Managing Swash Collisions in Arabic Fonts
Arabic kerning happens at the exit and entry strokes, not at the baseline. Diwan Kufi’s meem-final can collide with alef-init; reduce the kerning value until the two strokes form a single continuous pen line, then store the pair in the
Kerning for Accessibility
Readers with dyslexia rely on consistent letter rhythm; overly tight kerning clumps glyphs into unreadable blocks. WCAG 2.2 recommends a minimum 0.12 em letter-spacing for body text, but you can still kern headlines as long as you keep the relative spacing change below 15 %.
Test with the ChromeLens extension; turn on the dyslexia simulation and toggle your custom kerns. If the screen reader starts to stutter on compound words, loosen the pairs until the audio pacing steadies.
Screen-Reader Pronunciation Traps
Tight kerns can merge “r n” into “m” shape, causing NVDA to pronounce “modern” as “modem”. Add a hair-space character ( ) between the glyphs, then kern the pair back to visual zero; the screen reader sees two letters, the viewer sees one word.
Batch Kerning with Python and FontTools
FontTools can read every kern pair in a .ttf in under 200 ms. Write a script that loops through the table, calculates the absolute difference from a target average, and flags outliers beyond two standard deviations.
Feed the flagged list to a GlyphsApp macro that opens each glyph in a new tab, letting you approve or reject the fix in context instead of guessing numbers in a spreadsheet.
Automated Kern Proof Generator
Use DrawBot to render every flagged pair at 120 pt, write the kerning value in red beneath it, and export a multi-page PDF. Print it overnight; by morning you have a physical checklist that needs no screen calibration.
Kerning in Icon Fonts
Icon fonts treat glyphs like letters, so the kerning table can space chevrons away from text labels. If your right-chevron icon sits too close to the word “Next”, add a –40 unit kern so the arrow visually docks to the word instead of floating.
Remember that screen readers ignore kerning, so never rely on it to separate meaningful elements; use real margins for layout and keep kerning purely optical.
Legal Considerations: Modifying Licensed Fonts
Most EULAs allow kerning tweaks for final output but forbid redistribution of the modified font file. If you kern a client’s proprietary sans for a billboard, outline the headline to vectors before hand-off so the adjusted spacing travels inside the PDF, not inside the OTF.
Open-source fonts carry fewer restrictions, yet you must still rename the forked file to avoid collisions in a user’s font menu. Append “-Kern” to the family name and update the unique ID field so Adobe Fonts won’t overwrite your custom version.
Quality-Control Checklist Before Shipping
Export a plain-text file that contains every kerned pair you adjusted, then diff it against the original font table. Any unexplained delta is a potential regression.
Run the text through a grayscale blur filter at 3 px; if you still recognize individual collision spots, the kerning is not yet neutral. Iterate until the blur test passes, then lock the values in a character style named “Final-Kern” so future editors can trace your work.