Kerning Studio

Inspect pair-specific glyph positioning, OpenType GPOS/kern tables, and uniform tracking. Compare default shaping against unkerned spacing and experimental optical adjustments.

Read Kerning Lesson →

Reference Font:

Inter

Poppins

Playfair Display

Roboto Mono

Noto Sans Gujarati

Weight:

300

400

600

700

Pair Presets:

Size:120px

Boundary GuidesBaseline Axis

Three Visual Spacing Comparison Lanes

Comparing font table shaping against unkerned metrics and experimental manual offsets for “AV” in Inter.

Lane 1: Font Default

GPOS

Live OpenType pair shaping via font-kerning: normal.

Table Adjustment:-140 units (-8.2px)

Lane 2: Kerning Disabled

Unkerned

Raw nominal glyph advances via font-kerning: none.

Pair Adjustment:0 units (Nominal Advance)

Lane 3: Optical Experiment

User Shift

Interactive manual offset applied to second glyph.

Manual Offset:0 units (0px)

OpenType Positioning Table Metrics (Inter)

Pair Code Points

A (U+0041) + V (U+0056)

Unicode

Units Per Em (UPM)

2048 units

head.unitsPerEm

Positioning Table Type

GPOS

OpenType

Pair Adjustment Value

-140 font units

exact-font-data

Computed Pixel Shift

-8.2px at 120px

Conversion

Left Glyph Sidebearing

50 units

hmtx.lsb

* Metric Provenance Notice: Metrics are sourced directly from verified OpenType layout tables. Browsers parse GPOS tables through HarfBuzz/DirectWrite/CoreText shaping engines.

Generated Production CSS

/* Typography Kerning & Spacing Implementation */
.kerning-specimen {
  font-family: "Inter", sans-serif;
  font-size: 120px;
  font-kerning: normal;
  letter-spacing: 0em;
}

Web Standards Note: CSS cannot specify an arbitrary per-pair kerning number for general text. You can only toggle font-kerning: normal or apply uniform letter-spacing. Custom optical offsets require SVG path positioning or design-tool vectors.

Tracking (Uniform Spacing) Across Words

Notice how tracking shifts all letters equally, while kerning adjusts only specific geometry pairs.

Tracking:0em

AVALANCHE

Quick Test Words:

AVALANCHE

Typography

WAVEFORM

TORNADO

Yellow

Deepen Your Typography Engineering Knowledge

Learn how font designers build GPOS kerning classes, why optical kerning in publishing software differs from metrics kerning, and how to calibrate micro-typography in our Academy lesson.

Kerning & Tracking Lesson →Test in Playground →