Japanese web-safe font options.
It's surprising to discover the lack of web-safe fonts for the Japanese kanji symbol set. After all, the Japanese are voracious users of the web - especially on mobile devices. What font options exist?
It's surprising to discover the lack of web-safe fonts for the Japanese kanji symbol set. After all, the Japanese are voracious users of the web, especially on mobile devices.
Fun fact: As of August 26, 2016, more than 91.1% of Japan's 126,323,715 people are connected to the Internet - the most of any of the massively-populated countries (ie, more than 100 million citizens). Source: Internet Live Stats
Maybe it's not so surprising that it's hard to find an eye-pleasing, cross-platform, cross-browser, mobile-friendly font. It's a very big alphabet. There's almost 7000 symbols in kanji and supplementary non-kanji characters.
Google Fonts launched an early release version of its Noto Sans Japanese font in 2014, and it's still marked as early release two years later. Japanese web studio UmiDesign wrote up their experiences using the font.
This site, 2 Inches of Water, was recently redesigned. It features a feature heading of the word "Konnichiwa" (English: "hello").
Given that I've only used a Japanese font for one word in one special place, importing the entire Noto Sans would be wasteful. So what are the options for displaying the word "Konnichiwa"?
- Rely on unicode behaving predictably across all browsers and devices
- Convert a Japanese-friendly font to outlines in Illustrator, and export the appearance of the word as an SVG, and rely on alt text for the benefit of screen-reader devices
- Save the appearance of the word as a PNG image, and rely on alt text for the benefit of screen-reader devices
- Find a way to subset the font to only the required characters
At the time of writing this article, I'm deep in the process of launching the new site. Experiments have to wait for now. The site will launch with Unicode characters being rendered by the lowest fallback font, 'sans-serif'.
I'm keen to export the word's characters as SVG, and then use my responsive images workflow techniques to insert the SVG and a fallback PNG image with alt text.
Creating a subset font would be an interesting exercise. I'm especially curious about the comparative maintainability between a subset font and an SVG file, based on the assumption that the word "Konnichiwa" would get replaced in the future.