Japanese standard web fonts
CssFontsMultilingualWebfontsCss Problem Overview
I am working on a japanese website and have a hard time finding a font which looks good in japanese. I was surprised that so few fonts seem to exist for japanese. My team has contacted several web font providers without much success. Only one company could offer a web font for japanese but it was 35 megabytes which is far to big for the clients to download to their browsers.
For Latin letters there are a few fonts which one can be quite confident almost all users have, like Arial, Verdana, TNR, Georgia and so on. What fonts equal these in japan?
Css Solutions
Solution 1 - Css
Web-font for Japanese, though there are few providers exist, is not really practical as you found the size of the font data is too big to download. Usually Japanese font has 8,000-16,000 glyph so making new fonts means you need to make at least 8,000 glyph, which is pretty heavy task. As a result of it, there are very few variations in Japanese fonts, and Japanese users also care about fonts less than Latin-character users.
Most Japanese websites use default font sets provided on Windows or Mac. The latest ones are Meiryo and Hiragino Kaku Gothic Pro. For older versions such like Windows XP, it is good to add former default fonts MS Gothic(or MS Mincho)/Osaka.
Some old browsers could not understand those font names in English, some others do not recognize the names in Japanese, so it is safe to write both in Japanese and English.
Meiryo and Hiragino's order is, because Mac users may have Meiryo from MS-Office, and Hiragino is more familiar and matching well on Mac, better by starting Hiragino series.
So the current recommended practice is like this,
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
Solution 2 - Css
Fonts don't really have to be "web fonts" (woff) to be used on the web. I use several of these on my website:
But here are some free Japanese web-fonts (that I also use):
Solution 3 - Css
I am no font/design expert, but just about every Japanese PC should have basic Latin fonts like the ones you mentioned installed, so they will work. But those fonts give a kind of Western look to Japanese characters. If you want to use fonts that Japanese sites typically use I would start by browsing some of the more popular Japanese sites and using things like Firebug or the Chrome developer tools to examine the CSS and see what fonts they reference. For example, yahoo.co.jp currently has this CSS:
font-family: 'MS PGothic', Osaka, Arial, sans-serif;
The "gothic" typeface fonts seem fairly popular these days: on Windows, fonts like MS Gothic, MS PGothic, etc. Ming typeface is also widely used. These are the default browser font settings for Firefox on my Japanese Windows machine:
The proportional font is the sans-serif font, which is MS PGothic, serif font is MS PMing, and the monospace font is MS Gothic.
BTW, the "Osaka" font was a standard font on Japanese Macs in the 90s. Unless you want that "retro" feel, is highly recommended to use "Hiragino Sans" (not Kaku Gothic that's deprecated) for macOS and iOS devices for a consistent and modern look and better legibility. Also Hiragino Sans has far more font weights (10) than Kaku Gothic (only 2).
Solution 4 - Css
This is an old thread but for anyone doing research on this now, you should note that Meiryo is no longer a standard font loaded with Windows. Since Windows 10, the new default font is Yu Gothic. You can still install Meiryo manually however. Please see this article
Solution 5 - Css
Here's an answer in 2021 after my research and from my experience living and working in Japan. I like this article, though it is in Japanese so I'll do my best to summarize. Here are what some major companies are using in Japan:
日経 / Nikkei
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
産経 / Sankei
font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana;
ロイター / Reuters
font-family: "Hiragino Kaku Gothic Pro","Meiryo","MS Pgothic",knowledge-reg,helvetica,arial,sans-serif;
CNN
font-family: "メイリオ", Meiryo, Tahoma, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
Yahoo JP
font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;
時事通信 / Jiji Press
font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial, Verdana;
Note, sometimes it is suggested (such as here) to use a Mincho font stack like:
font-family : 'ヒラギノ角ゴ ProN' , 'Hiragino Kaku Gothic ProN' , '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic' , 'メイリオ' , Meiryo , 'ＭＳ ゴシック' , 'MS Gothic' , HiraKakuProN-W3 , 'TakaoExゴシック' , TakaoExGothic , 'MotoyaLCedar' , 'Droid Sans Japanese' , sans-serif;
Something I learned working here: some Japanese prefer Gothic or other fonts over Mincho fonts, as Mincho looks more "Chinese" according to some. None of the companies above use Mincho as evidence to that. Like it or not, I guess that's something to keep in mind when branding.
Solution 6 - Css
This is an old thread, but I was researching this today and found that Noto Sans is production ready (something I had read about a few years ago).
I've tried it out in Japanese and it looks really good, link here: https://www.google.com/get/noto/
The Japanese font is called 'Noto Sans CJK JP' (China/Japan/Korea Japan) if you do not wish to download the whole package.
Solution 7 - Css
For whom may come in the future, there is a great (long and deep) article on this very matter written by a japanese copywriter: The Most Comprehensive Guide to Web Typography in Japanese.
For instance: > Japanese kanji characters use more pixels than alphanumeric characters because they consist of many strokes. For example, the alphabet character “A” only needs 7 x 7 pixels, but the kanji character “艦” requires 15 x 15 pixels for it to be readable.
So, it's not only a matter on quantity, but also on pixels per character. Quite obvious now.
Solution 8 - Css
'Noto Sans CJK JP' is also available for Ubuntu linux. It is provided as an official package "fonts-noto-cjk". Still manual installation is required, it is expected to have it installed on Japanese Ubuntu machines.