Japanese font use in international websites

Hello! I am doing a transportation design website + a map about trains. I am looking for a Japanese-latin typeface.

Can you please recommend something, preferably free, but I am open to buy too.

ありがとう🙇‍♂️

This is a very good, and not so easy question to answer these days. It much easier to answer in the pre-smartphone desktop era where there were more limitations and far fewer choices: just work with the default installed Japanese fonts. All Japanese fonts come with built-in latin characters that might not be what you are looking for, but are designed to work well in mixed Japanese/Roman typography situations.

That’s still basically true today but web designers have to deal with the split between Apple, Google and Microsoft platforms, and the different Japanese fonts they bundle. There are many choices for Japanese web fonts and such but working intelligently with default installed Japanese fonts is always an excellent, and practical, strategy.

As a rule of thumb, Japanese fonts are much more adept dealing with mixed encoding/character pages than letting the designer designate different Japanese and Roman based fonts for each language. Only go that route if the designer is very experienced using Japanese fonts on the web in mixed language pages and extensively test Japanese font choices on different computer platform web pages.

In the pre-iPhone internet era the Japanese + Roman choices were basically: Hiragino on OS X and the Ricoh designed MS Ryumin/MS Gothic on Windows XP. The very nice Meiryo came along with Windows Vista, and Microsoft Word for MacOS, but the ubiquity of the XP installed base kept Meiryo sidelined. Then iPhone and later Android came along changing everything.

iOS, iPadOS and macOS all have the same basic set of Hiragino fonts but there are some differences to be aware of. The Japanese system font is Hiragino Sans ProN (Hiragino Gothic in Japanese) but the Roman characters are SF Pro. If a web designer wants to use the ‘native’ Roman characters of Hiragino Sans ProN, they need to designate the Hiragino font name, not the system font. Hiragino Sans is always a good overall choice for the iOS/macOS side if the designer isn’t familiar with Japanese fonts. It’s ubiquitous, reliable and works well in any situation.

The Android side is more complicated. The default Japanese system font was Motoya (MotoyaLMaru W3) which was replaced with Noto Sans CJK in Android 6. This upset a lot of Japanese web designers because Noto Sans CJK is a lousy font design, especially the hiragana and katakana designs. Most CJK ‘all in one’ fonts are shit, especially hiragana/katakana. If you want quality, choose a font that is optimized for each region…not easy to do with Android. The current Android system font is Roboto for Roman and Noto Sans CJK for Japanese. OpenType Variable Fonts were supposed to solve the CJK limitations of OpenType, but it hasn’t panned out so far. There are better solutions out there but…we are where we are. And no, CSS is no magic bullet solution either.

Here are some handy Japanese font resources to help web designers make good choices:

The Most Comprehensive Guide to Web Typography in Japanese

Japanese iOS default fonts

iOS default fonts

Japanese default fonts by platform

Also this Japanese web typography primer: Seven rules for perfect Japanese typography, might be useful if you don’t know anything about Japanese. Be very careful however as it is old (2016), is far from being perfect advice, and does not have any of the latest CSS typography and JP web font tricks.

---