Adjusting Kerning for Serif and Sans Serif Fonts

Kerning breathes spatial harmony into every word we read. A serif’s tiny feet and a sans serif’s clean ankles demand different breathing room to look effortless.

Ignore these differences and letters collide or drift apart, sabotaging legibility and brand tone in equal measure.

Understanding Kerning at the Micro Level

Kerning is the optical correction of space between two specific glyphs, not the global tracking that nudges an entire string. It compensates for awkward negative space created by slanted stems, rounded bowls, or diagonal terminals.

Because serifs extend visual mass outward, their perceived gaps shrink faster than sans forms, requiring tighter numeric values to feel identical. Conversely, sans letters sit visually farther apart at the same numeric setting, so looser kerning restores rhythm.

Font files store these corrections as kerning pairs in lookup tables; understanding the table’s structure lets you predict where manual tweaks will cascade.

Optical vs. Metrics Kerning

Metrics kerning pulls values pre-defined by the type designer and works best when the font’s spacing philosophy matches your project. Optical kerning ignores the table, calculates outline distance on the fly, and excels when mixing foundries or styles.

Serif families often ship with generous metrics to accommodate old-style numerals and long ascenders; optical kerning can over-tighten these, clipping terminals. Test optical settings at small sizes first, because screen rendering rounds outlines to pixel grids and exaggerates collisions.

Serif Anatomy and Its Kerning Demands

Serifs add horizontal ledges that visually bridge letter pairs, making “AV” feel closer than the same outlines without feet. Bracketed serifs taper into stems, creating triangular wedges that trap white space and demand tighter kerning values.

High-contrast modern serifs, like Didot, carry thick verticals and hairline horizontals; the thin strokes disappear at small sizes, so kerning must tighten to prevent the remaining thick strokes from drifting apart. Old-style serifs, such as Garamond, have diagonal stress and angled serifs that soften square counters, so loose kerning keeps texture open for body text.

Common Serif Collision Zones

“To”, “Tr”, and “Ty” trap excessive white above the right arm of “T” unless the following letter tucks slightly underneath. Slanted terminals on “f” and “j” poke into the next glyph’s shoulder, especially after round letters like “o”.

Capital “L” preceding a lowercase “a” or “y” leaves a glaring void; shave 10–15 units to pull them snug without touching. Numeral “1” beside a serif “I” creates a picket-fence repetition; negative kerning breaks monotony and aids digit recognition.

Sans Serif Spatial Logic

Sans letters shed ornamental feet, so their outer edges align cleanly with the glyph’s actual bounding box. This accuracy makes sans pairs more predictable, yet the absence of serifs exposes pure geometric space, demanding subtler kerning judgment.

Humanist sans retain calligraphic modulation, so diagonal strokes on “v” and “w” taper and nearly touch following straight stems if kerning is too tight. Grotesque sans like Helvetica carry flat terminals that butt against neighbors, so loosening 5–8 units prevents dark spots at text sizes.

Geometric Sans Traps

Perfect circles in “O” and “o” create the illusion of extra space, urging tighter kerning that can cramp adjacent flat stems. Triangular “A” and “V” pairs form arrow gaps that appear cavernous; tighten until the counter echoes the color inside “H”.

Uppercase “T” in geometric fonts sports a wide, flat top; any letter with a ascender tucked under it needs negative kerning to avoid a runway of white. Lowercase “r” with its short arm leaves a pocket beside round letters; optical kerning often overlooks this, so manual intervention is critical.

Size-Specific Kerning Strategies

At 8–10 pt, screen anti-aliasing blurs edges, so loosen serif kerning by 5–10 units to keep counters open. At 72 pt and above, print ink spread adds optical weight; tighten sans kerning by the same increment to maintain crisp rhythm.

Display cuts often remove kerning pairs to let designers craft bespoke spacing; start from zero and add increments of 25 units, testing at actual output size. Body-text cuts embed thousands of pairs; disable the ones that clash with your line length to avoid micro-rivers.

Variable Fonts and Responsive Kerning

Variable axes like “opsz” (optical size) can auto-adjust kerning lookups, but browsers still interpret them inconsistently. Declare font-variation-settings with an opsz value that matches your CSS font-size to trigger the intended spacing.

When compressing width via “wdth” axis, kerning values scale proportionally; manually tighten critical pairs like “WA” by an extra 20 units to restore balance. Use JavaScript to listen for viewport resize, then recalculate and inject fresh kerning overrides for sans headlines.

Pairing Serif and Sans in Headlines

Mixing a high-contrast serif with a neutral sans amplifies hierarchy, yet their kerning philosophies clash. Set the sans first at display size, tighten geometric pairs, then introduce the serif and match its looser rhythm by adding 10 units of letter-spacing globally before fine-tuning pairs.

When a sans “A” precedes a serif “V”, the sans apex feels sharper; pull them 30 units closer so the serif’s bracketed serif sits visually level with the sans apex. Reverse the order and the serif “A” needs less compensation because its feet already extend toward the sans “V”.

Color and Kerning Interaction

White text on dark backgrounds appears larger due to irradiation, so tighten both serif and sans kerning by 5 units to counter the glow. Light serif strokes vanish against bright backgrounds; loosening kerning by the same amount prevents fragility.

Gradients that traverse from thick to thin strokes exaggerate spatial imbalance; kern the thin side tighter so the color transition feels even. Metallic foil stamping spreads ink; prototype with 2 pt stroke added to simulate spread, then kern 15 units tighter before sending files.

Scripting Automated Kerning Workflows

PythonFontTools can batch-adjust kerning in UFO files: parse kerning.plist, target pairs containing “T” and shrink values by 20 units, then recompile. For sans families, write a conditional that only touches pairs where both glyphs have straight stems, preserving humanist diagonals.

In Glyphs App, use Metrics keys to link kerning to side-bearings; change “=n+10” in one master and all instances update proportionally. Export a custom parameter “DisableAllKernPairs=1” for display cuts, then re-enable selectively via a curated list in a .json file.

Proofing Kerning at Speed

Generate a waterfall proof that lists every suspect pair at 12, 24, 48, and 96 pt; print on uncoated stock to mimic ink soak. Flip the proof upside down to judge spacing without reading; squint until letterforms become abstract texture and uneven gaps leap out.

On screen, rotate the canvas 180° in Figma to sidestep word recognition, then toggle between light and dark modes to catch irradiation shifts. Capture a 5-second GIF scrolling through pairs; share in Slack for asynchronous critique without scheduling meetings.

Accessibility and Kerning Ethics

Tight kerning helps fit long words on narrow mobile screens, yet dropping below 0 em risks cutting off critical shapes for dyslexic readers. Maintain a minimum 0.02 em gap between any two glyphs when the x-height falls below 14 css px.

Screen readers ignore kerning, but low-vision users zoom 400%; at that scale, over-tightened serifs merge into black blocks. Test with CSS speech-output and a loupe to ensure semantic legibility survives both assistive tech and magnification.

Localization Nuances

German sharp-s “ß” followed by uppercase “A” in all-caps headlines needs special treatment; most fonts substitute “SS” but forget to kern the double “S” pairs, creating a hole. Manually add a “SA” pair with −30 units to restore rhythm.

French punctuation like « » carries fixed spaces that collide with serif feet; override the space glyph with a thin space (U+2009) and kern it −50 units to nestle quotes. Arabic numerals beside Latin letters in bilingual layouts require mirrored kerning logic—tighten the Latin side, not the numeral, because numerals maintain consistent advance widths across scripts.

Output-Specific Tuning

EPUB readers hijack font metrics; embed a CSS kern feature query to re-enable ligatures and kerning, then test on Kindle Previewer’s older firmware that ignores “font-kerning: normal”. For variable-font web deployments, subset the kerning table to include only the 300 most frequent pairs, cutting file size by 18 KB without user-visible loss.

In CSS, use font-feature-settings: “kern” off for oversized drop caps, then re-enable on the remaining line to create intentional overlap that feels editorial rather than broken. When preparing SVGs for laser engraving, convert kerning to absolute coordinates; otherwise the cutter will misread the spacing and burn overlapping paths.