Typesetting vertical text in East Asian web typography requires precise vertical inter-glyph spacing adjustments to avoid awkward vertical gaps between punctuation marks and characters. The OpenType vkrn (Vertical Kerning) feature tag adjusts vertical glyph metrics to ensure consistent typographic rhythm. Safari Web Inspector provides native controls to preview and audit vertical kerning on macOS.
Typographical Role of Vertical Kerning
Similar to standard horizontal kerning (kern), vertical kerning examines glyph pairs along the vertical Y-axis and adjusts the spacing distance between consecutive characters when rendered in vertical writing modes (e.g. writing-mode: vertical-rl).
Configuring Vertical Kerning in CSS
Declare vertical kerning properties in your stylesheet:
.vertical-poetry {
writing-mode: vertical-rl;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-feature-settings: "vkrn" 1;
font-kerning: normal;
letter-spacing: 0.05em;
}Inspecting Features in Safari Web Inspector
- Open the vertical typography webpage in Safari.
- Right-click the vertical text line and select Inspect Element.
- In Web Inspector’s right pane, open the Font tab.
- Locate Vertical Kerning (vkrn) under the Features disclosure list.
- Toggle the switch to audit immediate vertical baseline shifts rendered by Apple’s CoreText layout engine.
Verifying Proportional Alternates Pairing
Pair vkrn with proportional vertical metrics (vpal) to achieve optimal visual harmony in traditional publishing layouts.