Sophisticated digital typography across East Asian scripts requires exact control over OpenType layout feature tables. In Japanese typography, the JIS X 0213:2004 (JIS04) standard defines updated kanji shapes and metric forms that frequently diverge from legacy JIS90 representations. When authoring high-end editorial layouts, marketing portfolios, or software user interfaces in Apple Safari, web designers often combine proportional kana metrics (pkna) with specialised stylistic sets (ss16). Inspecting and fine-tuning these OpenType layout features in macOS Safari Web Inspector ensures that typography scales smoothly across Apple Retina displays. This tutorial details how to evaluate and debug these CSS font features.
Understanding Proportional Kana and Stylistic Set 16
By default, traditional Japanese ideographic typefaces utilise uniform full-width em-square bounding boxes for both kanji and kana glyphs. While full-width bounding boxes provide stability in vertical layouts, horizontal text layouts benefit significantly from proportional kana shaping. Enabling the pkna feature instructs the font engine to adjust kana character margins dynamically based on natural stroke proportions.
Complementing this, OpenType stylistic sets (from ss01 to ss20) allow type designers to package alternative glyph interpretations. In fonts adhering to JIS04 conventions, ss16 is frequently designated for calligraphic brush alternates or expressive headline forms tailored for display typography. Combining pkna with ss16 creates harmonious Japanese text layouts with balanced spacing.
Configuring CSS Font Feature Declarations
To implement proportional kana alongside JIS04 stylistic alternates in CSS, specify both modern high-level CSS properties and lower-level font-feature-settings strings to maintain cross-browser backwards compatibility:
/* Typography rules for JIS04 editorial copy */
.japanese-editorial-copy {
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-size: 1.125rem;
line-height: 1.85;
/* Modern high-level CSS font variant properties */
font-variant-east-asian: jis04 proportional-widths;
/* Low-level OpenType feature fallbacks */
font-feature-settings: "jp04" 1, "pkna" 1, "ss16" 1;
text-rendering: optimizeLegibility;
}When applying multiple feature tags within font-feature-settings, ensure that values are comma-delimited within a single string declaration. Redundant declarations across separate CSS rules will overwrite rather than merge individual tags.
Using Safari Web Inspector Typography Panel
Apple Safari provides an advanced typographic inspection interface in Web Inspector specifically designed for inspecting OpenType features. Follow these steps to verify active glyph rendering:
- Open the webpage in Safari on macOS.
- Right-click the Japanese text segment and select Inspect Element.
- In the right-hand inspection sidebar, select the Styles tab, then click the Fonts sub-panel.
- Locate the Font Features collapsible accordion to view all OpenType features detected within the rendered typeface.
- Verify that Proportional Kana (pkna) and Stylistic Set 16 (ss16) are toggled active.
- Use the live toggle switches in the panel to observe immediate visual comparisons between standard em-box spacing and proportional glyph alignment.
Validating Font Fallback and Cross-Platform Rendering
Different operating systems package divergent baseline Japanese fonts. While macOS systems natively bundle Hiragino ProN typefaces featuring comprehensive JIS04 and OpenType glyph sets, external platforms or custom web fonts may lack ss16 table definitions.
Within Safari Web Inspector, review the Rendered Fonts table at the bottom of the Typography tab. If the engine falls back to a secondary font lacking pkna or ss16 support, the inspector marks the respective OpenType feature as unavailable, alerting developers to refine font stack fallbacks before production deployment.