Kerning pair editor

Edits supplied glyph-pair offsets in font units, with baseline and edited previews, bounded keyboard nudging, and one-step undo.

Preview

Pair spacing

Georgia, serif · 1000 units per em

Baseline: -60 units

Edited: -80 units

Offset (font units)

Left and right arrows adjust one unit. Hold Shift for ten units.

In action

Refine the space between letters

Pair review · Georgia

Pair spacing

Georgia, serif · 1000 units per em

Baseline: -60 units

Edited: -80 units

Offset (font units)

Left and right arrows adjust one unit. Hold Shift for ten units.

When to use

Use it for

Supplied glyph strings, a caller-selected font family, and explicit units per em.
value/defaultValue/onValueChange as a map from pair id to offset; null or an absent entry means not supplied.
baselineOffsets to compare and reset a pair; missing baselines never imply zero.
Optional min/max bounds default to negative and positive units per em; typed values retain native validation.
activePairId/defaultActivePairId/onActivePairChange for caller-owned pair navigation.

Not for

Treating the preview as a font shaping engine, font-file editor, or source of baseline kerning.
Assuming a requested font is installed; the browser uses its normal font fallback.
Undoing external host changes; undo is available only while the latest requested edit remains current.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { KerningPairEditor } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/kerning-pair-editor.

2. Vendor the source

npx @noorddev/vlak-cli add kerning-pair-editor

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/kerning-pair-editor.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { KerningPairEditor } from "@noorddev/vlak-react";

<KerningPairEditor label="Pair spacing" name="kerning" fontFamily="Georgia, serif" unitsPerEm={1000}
  pairs={[{ id: "av", left: "A", right: "V" }, { id: "to", left: "T", right: "o" }]}
  baselineOffsets={{ av: -60, to: -40 }} defaultValue={{ av: -80, to: -50 }} />

Props

KerningPairEditor

Explicit pair offsets with browser font previews, without font-file editing or shaping.

Prop	Type	Default
`label`required	`ReactNode`
`pairs`required	`KerningPair[]`
`fontFamily`required	`string`
`unitsPerEm`required	`number`
`baselineOffsets`	`KerningOffsets`	`{}`
`value`	`KerningOffsets`
`defaultValue`	`KerningOffsets`	`{}`
`onValueChange`	`(offsets: KerningOffsets) => void`
`activePairId`	`string \| null`
`defaultActivePairId`	`string \| null`
`onActivePairChange`	`(id: string \| null) => void`
`min`	`number`	`-unitsPerEm`
`max`	`number`	`unitsPerEm`
`readOnly`	`boolean`

Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange">.

Keyboard

Keys	Does
`Tab`	Moves through the pair selector, navigation, offset editor, reset, and undo actions.
`Arrow left, Arrow right`	Nudges the focused offset by one font unit within the supplied bounds.
`Shift + Arrow left, Shift + Arrow right`	Nudges the focused offset by ten font units.
`Enter, Space`	Activates the focused previous, next, reset, or undo button.

Accessibility

A fieldset and legend name the editor; Vlak Select and Input controls have 44px targets.
Baseline and edited offsets remain text, and each pair preview has an accessible description.
Preview spacing is offset divided by units per em; intrinsic browser kerning and ligatures are disabled for the comparison.
Missing or invalid font units suppress geometry; typed out-of-bounds values expose native validity and a visible explanation.
The ref and native attributes reach the fieldset. Named offsets submit per pair; reset restores uncontrolled offsets and clears undo.

Markup

<fieldset class="rs-kerning-pair-editor"><legend class="rs-kerning-pair-editor-legend">Pair spacing</legend><div class="rs-kerning-pair-editor-previews"><figure class="rs-kerning-pair-editor-preview"><figcaption class="rs-kerning-pair-editor-note">Edited: -80 units</figcaption><div class="rs-kerning-pair-editor-glyphs" style="font-family:Georgia,serif" role="img" aria-label="A followed by V, edited offset -80 units"><span class="rs-kerning-pair-editor-glyph" aria-hidden="true">A</span><span class="rs-kerning-pair-editor-glyph" aria-hidden="true" style="margin-inline-start:-0.08em">V</span></div></figure></div><label class="rs-kerning-pair-editor-field">Offset (font units)<input class="rs-input rs-input-full rs-kerning-pair-editor-input" type="number" value="-80" min="-1000" max="1000" step="any" /></label></fieldset>

Classes

.rs-kerning-pair-editor.rs-kerning-pair-editor-legend.rs-kerning-pair-editor-toolbar.rs-kerning-pair-editor-field.rs-kerning-pair-editor-input.rs-kerning-pair-editor-button.rs-kerning-pair-editor-previews.rs-kerning-pair-editor-preview.rs-kerning-pair-editor-glyphs.rs-kerning-pair-editor-glyph.rs-kerning-pair-editor-note

Depends on

/select /input /button