font-variant-east-asian Demo

font-variant-east-asian is a CSS property that controls the use of alternate glyph forms for East Asian scripts—primarily Japanese, Chinese, and Korean. It allows you to select specific JIS (Japanese Industrial Standard) glyph variants, toggle between full-width and proportional-width rendering, and enable ruby annotation forms. It's part of the CSS Fonts Module Level 3 specification and is widely supported in modern browsers (Chrome 63+, Firefox 34+, Safari 9.1+).

These correspond to different revisions of the Japanese Industrial Standard for character shapes:
JIS78 (JIS X 0208:1978) – The earliest standard, with older glyph shapes for certain characters.
JIS83 (JIS X 0208:1983) – A revision that modified several character designs.
JIS90 (JIS X 0208:1990) – The most commonly referenced standard, widely used in Japanese typography.
JIS04 (JIS X 0213:2004) – The latest revision, aligning more closely with handwriting norms.
Notable characters affected include 葛 (kuzu), 辻 (tsuji), 瀬 (se), and 鴎 (kamome), where stroke counts or component shapes differ between standards.

By default, East Asian characters are rendered in full-width (each character occupies an equal-width square, roughly 1em wide). Proportional-width allows characters to take only the horizontal space they naturally need—narrow characters like 「、」「。」「ぁ」「っ」 become visibly tighter, improving readability in running text. This requires the font to support the pwid OpenType feature. Modern Japanese fonts like Yu Gothic, Hiragino, and Noto CJK all support this.

Support depends on the font's OpenType feature set. Well-supported fonts include:
• Yu Gothic / Yu Mincho (bundled with Windows 10/11)
• Hiragino Sans / Hiragino Mincho (bundled with macOS)
• Noto Sans CJK / Noto Serif CJK (free, cross-platform)
• Source Han Sans / Source Han Serif (Adobe's open-source CJK fonts)
• MS Gothic / MS Mincho / Meiryo (legacy Windows Japanese fonts, partial support)
If you see no difference when switching variants, your selected font may lack the required OpenType tables. Try switching to Yu Gothic or Noto Sans CJK.

Yes! The CSS property accepts multiple space-separated values. Common combinations include:
font-variant-east-asian: jis90 proportional-width; – JIS90 glyphs with proportional spacing.
font-variant-east-asian: jis04 full-width ruby; – JIS04 glyphs, full-width, ruby-optimized.
Note that simplified and traditional cannot be combined with JIS variants—they are mutually exclusive.

Primarily, font-variant-east-asian is designed with Japanese typography in mind—especially the JIS variant selection. However, the simplified and traditional values can be used for Chinese text to prefer simplified or traditional glyph forms when the font supports both. The proportional-width and full-width values apply universally to all East Asian scripts. For Korean, the impact is most noticeable with proportional-width rendering.

Chrome 63+, Firefox 34+, Safari 9.1+, Edge 79+, and Opera 50+ all support font-variant-east-asian. Internet Explorer does not support it. Mobile browsers (iOS Safari 9.3+, Android Chrome) are also compatible. Can I Use reports global coverage of approximately 93%.