Mastering CSS Techniques for Custom Kerning on Websites

Kerning is the unsung hero of web typography. When it’s wrong, letters collide or drift apart like awkward strangers at a party.

CSS gives us surgical tools to fix these micro-gaps without touching a font file. Mastering them turns good designs into seamless reading experiences that users feel but never notice.

Understanding Kerning vs. Letter-Spacing

Kerning adjusts the space between specific pairs, while letter-spacing adds or removes the same amount across every glyph. Confuse the two and your headlines will look either anemic or claustrophobic.

Optical kerning, baked into the font by the designer, targets problem pairs like “AV” or “To.” CSS can override those choices, letting you tune them for your exact size, weight, and color palette.

Letter-spacing is blunt but predictable; kerning is precise and contextual. Use letter-spacing for utility, kerning for personality.

Built-In Font Features

Modern fonts ship with kern tables or GPOS kerning data. Activate them with `font-feature-settings: “kern” 1;` and the browser will apply the designer’s pair fixes automatically.

Always pair that rule with `font-kerning: normal;` for wider browser support. Safari still ignores the first declaration without the second.

Manual Override Strategies

When the font’s native kerning looks off at 64 px, override selectively. Target the offending pair with a span and nudge it via `letter-spacing: -0.02em;`.

Use `em` units so the tweak scales fluidly. A –0.02em kiss at 16 px becomes –0.04em at 32 px without extra media queries.

CSS Properties Deep Dive

Five properties control spacing: `font-kerning`, `font-feature-settings`, `letter-spacing`, `text-rendering`, and `word-spacing`. Each has a distinct rendering pipeline and cascade weight.

`text-rendering: optimizeLegibility;` enables kerning and ligatures in Blink and Gecko, but it delays paint by up to 100 ms on long paragraphs. Use it only on headings or hero text.

Never set `letter-spacing: 0;` and assume kerning dies; browsers still apply kern tables unless explicitly disabled.

font-kerning Syntax

Accepts `auto`, `normal`, or `none`. `auto` respects the font’s default, `normal` forces it on, `none` strips every pair adjustment.

`none` is useful for pixel-perfect monospaced layouts or when you want full manual control via spans.

font-feature-settings Gotchas

The shorthand `”kern” 0` turns kerning off, but it also nukes ligatures and stylistic sets in some variable fonts. Test in Firefox, which is strictest about feature precedence.

Always declare low-level features after high-level ones. Place `font-kerning` first, then `font-feature-settings`, then `letter-spacing`.

Relative Units for Fluid Kerning

Pixels lock your nudge to one screen density. `em` and `ch` let the gap breathe with the font’s own proportions.

A tight “WA” pair might need –0.03ch at 40 px and –0.05ch at 80 px. Declare once in `em` and the browser handles the math.

Clamp functions pair nicely: `letter-spacing: clamp(–0.05em, –0.3vw, –0.02em);` keeps the tweak visible from mobile to 4K.

ch Unit Precision

`1ch` equals the width of the “0” glyph in the active font. Use it when you want the gap to mirror character advance rather than font-size.

For condensed fonts, `ch` values shrink, so your –0.02ch kiss tightens automatically as the face gets narrower.

Viewport-Based Micro-Shifts

On ultrawide monitors, headlines balloon and native kerning can feel loose. Add a media query at 2000 px that subtracts an extra 0.01em.

Combine with `calc(–0.02em + –0.1vw)` to create a sliding scale that never needs breakpoints.

Variable Fonts and Kerning Axes

Variable fonts can expose a `KERN` axis that interpolates kerning values across the design space. Not all families ship it, but Recursive and Inter do.

Access the axis with `font-variation-settings: “KERN” 1.2;` to tighten pairs by 20 %. Values below 1.0 loosen, above 1.0 tighten.

Because the axis animates, you can transition from loose to tight on hover without span spaghetti.

Detecting Axis Support

Use `@supports (font-variation-settings: “KERN” 1)` to fork your CSS. Fallback to `letter-spacing` spans for older browsers.

Wrap the test in a custom property so you can toggle globally: `–kern-fallback: –0.02em;`.

Performance Note

Animating `KERN` triggers composite layers, not layout, so it stays smooth at 60 fps. Avoid animating `letter-spacing` on the same element to prevent double paint.

Pair-Specific Tweaks with Data Attributes

Instead of littering spans, mark problem pairs with `data-kern=”AV”` and let CSS inject the fix.

“`css
[data-kern=”AV”]{ letter-spacing: –0.04em; }
“`

JavaScript can auto-inject the attribute after measuring glyph bounding boxes with `CanvasRenderingContext2D.measureText()`.

Regex Scanner

A one-liner like `/AV|To|WA/g` can crawl your headline text and wrap matches in ``. Run it once at build time to avoid runtime cost.

Store the offsets in a JSON manifest so your CMS can reuse the tweaks across languages.

CJK Considerations

Latin kerning rules break CJK characters. Exclude them with `:lang(ja) [data-kern]{ letter-spacing: 0; }`.

Automated Kerning with JavaScript

Opentype.js can parse the font’s GPOS table and calculate the exact kern value for any pair at any size. Feed the result into a CSS custom property.

“`js
const pair = font.getKerningValue(‘A’,’V’);
root.style.setProperty(‘–kern-AV’, `${pair}em`);
“`

Debounce the update on resize; a 2 ms throttle keeps it cheap even on 240 Hz displays.

WebFont Loading Hook

Wait for the `fontactive` event from Font Face Observer before measuring. Otherwise you’ll kern the fallback font and create a flash of botched spacing.

Cache the calculated values in `localStorage` keyed by font, weight, and size to skip math on repeat visits.

Subpixel Snap

Round values to the nearest 0.02px to avoid subpixel antialiasing artifacts that blur stems. Browsers quantize anyway, so be first and stay sharp.

Optical Size Interaction

Optical size axes shrink counters and tighten kerning as they climb. A headline at `opsz 72` may need looser manual kerning than body text at `opsz 16`.

Counteract with `font-variation-settings: “opsz” 72, “KERN” 0.8;` to loosen by 20 % only when the optical size crunches glyphs.

Media Query for opsz

Detect high-dpi desktops with `min-resolution: 2dppx` and bump `opsz` down, then tighten kerning back to normal. The user sees crisper shapes without crowding.

Dark Mode Twist

White text on black appears larger, so pairs feel looser. Add `html[data-theme=”dark”] [data-kern]{ letter-spacing: –0.01em; }` to compensate for optical illusion.

Accessibility & Readability

Excessive kerning tightening drops WCAG contrast for thin strokes. A –0.08em nudge can reduce the perceived weight of “Helvetica Neue Light” below 4.5:1.

Test with a 1 px offset text shadow to simulate stroke gain. If the shadow rescues contrast, your kerning is too tight.

Screen readers ignore spans used for kerning, but cognitive load rises when letters touch. Keep minimum gap at 0.05em for body text.

User Preference Query

Respect `prefers-reduced-motion` by removing animated kerning transitions. Static spacing is less jarring for readers with vestibular disorders.

Language-Specific Rules

French punctuation like « » expects thin spaces. Disable manual kerning inside quotes to avoid collisions with the guillemet’s own kern table.

Testing Workflows

Chrome DevTools now visualizes glyph boxes in the “Fonts” sidebar. Toggle kerning off and on to see the exact pixel shift per pair.

Export a 10× PNG of a headline, then drop it into Kerning.js’ interactive tester to measure side bearings in real time.

Automated visual regression tools like Percy can flag unintended 1 px drift between releases by diffing glyph bounding boxes instead of full screenshots.

Unit Test Example

“`js
expect(getKernOffset(‘AV’, 48)).toBeCloseTo(–1.2, 1);
“`

Run the suite in CI to block pull requests that accidentally loosen brand headlines.

Cross-Browser Matrix

Test on Safari iOS with dynamic text size enabled. Its kern table scales nonlinearly, so your –0.02em may become –0.03em at 130 % user zoom.

Production Checklist

Ship a single `@font-face` with `font-display: optional` to eliminate FOIT, then apply kerning fixes after the swap event.

Inline the first 2 KB of critical CSS that contains only headline kerning rules. This prevents a flash of unkerning on slow 3G.

Preload the font with `` so the kern table arrives before the browser starts laying out text.