Japanese Standard Web Fonts

Japanese standard web fonts

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;

Are web safe fonts internationally safe as well?

You probably already know this, but different regions don't really have their own specific fonts. In a lot of regions websites will go with the system default font, because the language of the region is pictorial (if you thought downloading a webfont was slow, imagine downloading the entire Japanese character set)

The best you can probably do is go with a common stack of fonts that OS's have installed. Medium have a great post on how they prioritize system fonts for their UI components, and the accidental time travel they encountered on the way.

In the end, sans-serif is your friend. I once had to check how a website looked on a PlayStation Vita console on it's built in Internet Browser, which actually avoids downloading webfonts and opts instead for it's own sans-serif font, which has characters for both Latin and non-Latin based languages in one (very big) character library.

Of course, there are many cases where even in non-Latin languages English words are used instead of a local translation (brand names, acronyms) - this is often where I've seen Times New Roman bleed into Asian websites, because it was my browser's (and probably yours) default font to render in the absence of any specific CSS declaration.

If you think from the context of someone seeing a English word in the middle of a Chinese article, they're probably more likely to recognize an English word in Times New Roman than, say, Tahoma. I've even seen that some Asian Cartoons have English text in Times New Roman. While in the West that's we may find it an eye-sore, in countries that don't use latin characters any deviation from the style of the character can compromise the meaning of the word, or change it entirely.

But anyways. I'd recommend trying a leaf from Medium's book. If you feel like displaying a different font, then by all means you can, CSS is great in that respect that it will silently fall back to the next best thing. You'll never get it perfect, but as long as everyone can read your text, they'll be able be able to understand it.

P.S Always keep sans-serif at the end ;)

Is there a way to import a font at a larger or smaller size relative to other fonts?

I think you’ve done a good job of assessing this already. You could:

1. choose a type family that was designed to handle both Japanese and Latin glyphs, or
2. try and create the language-based spans in code as part of your CMS or build process, or
3. try and modify the font itself, if your license allows this

Option 1

If the site you’re working on is going to have a lot of Japanese and Latin text together, the best way to solve this would probably be to switch to a type family that can handle both Latin and Japanese. Then, things like the weight and line height metrics will also match in addition to the relative size of the glyphs.

Option 2

font-size-adjust was intended for this sort of situation, but in practice it only really works in Firefox on desktop at the time of writing: https://caniuse.com/font-size-adjust The MDN page is a little misleading, as it is behind a feature flag for most browsers.

Even when that is supported, you might still need spans as you’ve described it.

Depending on your CMS or build process, you could try doing that with a library like this: https://github.com/patrickschur/language-detection

Your situation also sounds similar to this answer, where you are only looking to differentiate between a finite amount of languages: https://stackoverflow.com/a/22403736

Using those, you’d generate the spans you need, without your authors having to think about it.

Option 3

Try and modify the font itself, if your license allows this. You might need to open a dedicated question for this, as it will depend a lot on the format of the source files you have access to. As an example, here’s a quick outline of what it would like like to make this modification in FontForge. That also depends on having access to the source files, with an open source license for the fonts or other license that allows derivate works.

Is there any standard that has a list of web-safe fonts

There aren't really any "web-safe" fonts.

Standards do not require of browsers to always support specific fonts. It all comes down to what is installed in a specific OS. If a browser finds the specified font, it takes it. If not, it looks for a substitute.

The smartest option is to specify a list of fonts like this:

font-family: Arial, Helvetica, Sans-Serif;

If you are able to, check how your page looks with all of those in different OSes. That's the best performance you could give. Otherwise, develop your pages to be robust to some font size variations, that's always the best bet.

---

Related Topics