Understanding the Role and Evolution of Kerning in Typography

Kerning adjusts the space between specific letter pairs so the overall texture of a line looks even. When it’s wrong, readers feel it before they can name it.

Good kerning disappears; bad kerning creates accidental dark spots, floating letters, and words that seem to break apart. Mastery of this micro-skill separates professional typography from amateur layouts.

What Kerning Actually Does to Letterforms

Kerning does not shrink or stretch glyphs; it redefines the side bearings—the invisible buffers that flank each character. By trimming these buffers only between problematic pairs, the designer preserves the glyph’s intrinsic width everywhere else.

Imagine the pair “To.” The curved right stem of “T” leaves a visual canyon before the upright “o.” A negative kerning value of −40 units pulls the “o” leftward so the stem appears to cradle it. The counter-space above the “o” now aligns optically with the crossbar of the “T,” eliminating the white hole.

Conversely, combinations like “r.”” need positive kerning. The period sits too close to the arch of “r” and can read like a misplaced comma. Adding +10 units gives the dot its own optical territory without loosening the entire word.

Side Bearings vs. Kerning: Where One Ends and the Other Begins

Side bearings are the default buffer zones programmed into every glyph. Kerning is the exception table that overrides those defaults for specific pairs. Without side bearings, every letter would crash into its neighbor; without kerning, only the average spacing would be safe, not the exceptions.

Designers often widen side bearings for display cuts to survive large sizes. They then kern tightly to rescue the exceptions, achieving both sturdiness and finesse.

The Invisible Physics of Optical Space

Letters obey the eye, not the ruler. A slanted “A” and a vertical “V” can have identical mathematical gaps yet feel completely different. Kerning values must compensate for diagonal stress, stroke contrast, and aperture size.

Round letters like “O” bleed into their neighbors because curves reflect light differently than straight stems. The brain perceives less mass, so the same numerical gap feels looser. Reducing the kerning value by 5–10 units restores perceived equality.

Serifs complicate the equation. Their tiny slabs add horizontal momentum, especially on the right side of “f” and “r.” Modern serif fonts include kerning pairs that tuck terminal serifs just under overhanging arms, preventing awkward tangents.

From Hand-to-Metal: Kerning’s Pre-Digital Origins

Metal type had no kerning table; founders cast exceptions as separate sorts. A “W” sort included a pre-notched shoulder so the following “a” could nestle underneath, saving one pica of space. Printers called these “kerns” because the metal itself protruded beyond the body.

Compositors kept small trays of these kerned sorts for frequent pairs like “Ye” or “Qu.” They learned to feel the difference by weight: a kerned sort was lighter on one side, a tactile reminder to place it correctly.

When phototypesetting arrived, operators adjusted spacing by sliding film strips under a magnifier. The unit was no longer a physical notch but a micrometer dial measured in 1⁄1000 em. This was the first true negative kerning, because letters could overlap on film without colliding in space.

The Linotype Legacy and the Birth of Unit Systems

Linotype machines used 18-unit widths. Each matrix carried a fixed width, so kerning required a second pass with a “spaceband” wedge. Operators memorized which wedges corresponded to −1, −2, or −3 units, creating an internal lookup table decades before digital encoding.

Digital Encoding: How Kerning Lives Inside Fonts

OpenType stores kerning in two places: the historic “kern” table for backwards compatibility and the “GPOS” table for modern scripts. GPOS can kern vertically, diagonally, and even rotate glyphs while adjusting spacing. This lets Arabic dots slide under preceding teeth or Devanagari vowel signs tuck under descending stems.

Each pair is stored as a two-byte glyph ID plus a 16-bit value in font units. A value of −60 at 1000 UPM means the second glyph moves left 6% of the em. Variable fonts can interpolate that value across an axis, so kerning tightens automatically as weight increases.

Subtables compress the data. Fonts group pairs that share the same value, then delta-encode the remainder. A 256-kB Latin font can hold 3000 pairs in under 8 kB of binary, speeding load time on the web.

Class-Based Kerning: One Rule, Many Glyphs

Instead of listing “Ta Te To Tu,” designers assign “T” to a left class and “a e o u” to a right class. One entry covers 40 pairs instantly. Classes can overlap; “y” might belong to both a round-right class and a descender class, letting the font choose the tighter value when needed.

Manual, Automatic, and Semi-Automatic Workflows

Professional type designers still hand-kern the first 300–500 pairs to set the rhythm. They print at 300% size, squint, and mark overrides with red pencil. This analog step catches optical illusions that algorithms miss.

Automation follows. Tools like MetricsMachine or Kern On analyze stem angles, counter sizes, and serif lengths to suggest remaining pairs. The designer accepts, rejects, or fine-tunes each suggestion. Semi-automation keeps the human eye in command while cutting production time by 70%.

Web designers who never build fonts can still kern. CSS letter-spacing adjusts tracking globally, but the font-variation-settings property can call pre-built kerning alternates. For logos, convert the word to outlines and nudge nodes in Illustrator, freeing yourself from font metrics entirely.

Batch Proofing: Stress-Testing at 8 pt, 48 pt, and 200 pt

Kerning that works at text size can look clunky at poster size. Set a proof sheet with the same sentence repeated at three sizes. Overlay a 10% tint rectangle between letters; if the tint blocks vary in width, the kerning needs another pass.

Web Performance vs. Readability: The Subset Dilemma

Full kern tables add 10–30 kB to a web font. Google Fonts strips kerning below 14 kB to hit cache goals, forcing designers to choose speed or fidelity. One workaround is to subset only the kern pairs that appear in your above-the-fold headline, shrinking the table to 2 kB.

Variable fonts can encode kerning as deltas on the “wght” axis. A bold instance tightens gaps automatically, so you ship one file instead of two. Browsers that don’t support variable axes fall back to the default kerning, a graceful degradation.

Preload critical pairs with and use unicode-range to split the kern table by language. Latin pairs load first, Cyrillic later, keeping Core Web Vitals green.

Global Scripts: Kerning Beyond Latin

Arabic needs vertical kerning. The “meem” initial form has a deep descender that collides with the tail of “jeem.” GPOS shifts the entire “jeem” glyph upward 30 units, preserving the join while avoiding overlap.

In Thai, marks stack. The “sara um” vowel sits below consonants and must kern leftward to center under the stem. Failure produces a floating circle that breaks syllable recognition for native readers.

Chinese scripts rarely kern because characters are monospaced. However, punctuation like full-width commas can feel too roomy after round characters. Designers embed half-width comma variants triggered by context, a cultural form of kerning.

Indic Scripts and the Halant Exception

Devanagari halants tuck under preceding consonants. If the consonant has a right serif, the halant must slide left an extra 15 units to avoid a gap that looks like a missing vowel. This micro-adjustment is encoded as a contextual kerning lookup, not a ligature.

Optical Sizes: How Kerning Should Shrink and Grow

At 6 pt, ink spread closes gaps. Kerning values loosen by 5–10 units to compensate. At 96 pt, strokes remain crisp, so pairs tighten to prevent white rivers.

Adobe’s Optical Size axis automates this by interpolating between two kern masters. The 6 pt master has looser defaults, the 72 pt master tighter ones. Designers proof the interpolation at 36 pt to ensure the curve is smooth, not stepped.

For variable brands, encode a custom “OPSZ” axis in the fvar table. Marketing teams can dial optical size in Figma without exporting new files, keeping campaigns consistent across billboard and mobile.

Accessibility: Kerning for Low-Vision and Dyslexic Readers

Over-tight kerning reduces letter distinction. Readers with cataracts see “rn” as “m” when kerned too tightly. WCAG 2.2 recommends a minimum letter-spacing of 0.12 em for body text, effectively disabling negative kerning.

OpenDyslexic applies positive kerning to every pair, increasing spacing by 15 units. This slows reading for average users but cuts mirroring errors for dyslexic users by 7% in A/B tests.

Offer a user-toggle. Store the preference in localStorage and switch to a spaced font via CSS custom properties. Respect the reader’s eyes, not the designer’s ego.

Branding Case Studies: When Kerning Becomes Trademark

The FedEx arrow lives in the negative space between the “E” and “x.” The original kerning value is −92 units, tighter than any other pair in the wordmark. Legal filings include that exact number, turning spacing into intellectual property.

Google’s 2015 re-kerned Product Sans tightened “g o o g l e” by 3 units globally. The change saved 2 pixels in the 16 px favicon, allowing the “G” to render crisply on low-DPI screens. The kerning delta is now part of the brand guidelines, enforced by an internal lint tool.

Luxury watchmaker Patek Philippe custom-kerns every numeral on dial prints. The “1” sits 20 units closer to any glyph that follows, preventing the slender stroke from appearing isolated. Counterfeit watches often fail this test under a 10× loupe, revealing uneven gaps.

Quality Control: Checklists for Designers and Developers

Export a waterfall proof that lists every kerning pair at 12 pt, 24 pt, and 72 pt. Print it on uncoated 90 gsm paper to simulate ink gain. Mark any pair whose counter creates a white triangle taller than the x-height.

In code, run harfbuzz-shape to dump glyph positions. Pipe the output to a Python script that flags pairs whose advance width deviates more than 5% from the median. This catches rounding errors that accumulate on low-DPI screens.

Finally, test with real copy, not Latin filler. User-generated text contains email addresses, hashtags, and apostrophes—pairs that default tables often ignore. A five-minute Twitter scrape can reveal 30 missing pairs you never thought to kern.