Japanese typography on the web — tips and tricks
Hello mates! Today I want to tell how to provide Japanese language on site
Allow me to make a small introduction. Why does it seem so hard to use Japanese on some sites. We have a bunch of reasons. First of all — most of the latin web-fonts on MyFonts or anywhere else don’t provide non-latin unicode range.
Second reason is that Japanese writing system consists of 3 different alphabets excluding Rōmaji and Arabic numerals):
- Hiragana — 46 characters
- Katakana—48 characters
- Kanji—approximately 2,000 to 3,000 characters. Not bad, Ha?
Third are different rules in perceptions of text including symbols, characters, separate words and meanings.
And fourth reason is differences in characters spelling. If you want more to know additional specifics, check out this amazing guide to web-typography in Japanese.
Briefly we could highlight these differences:
- Japanese kanji characters use more pixels in a limited area and mostly they are openwork and detailed
- Japanese web-typography has only UPPERCASE characters.
- Japanese fonts are monospaced
- Serif is Mincho and Sans-Serif is Gothic in Japan
Now we can get to work. For instance you have all the new Montserrat font for your brand and now you need Japanese.
We will be use external fonts. There is not so many free complete JP fonts but Google has effective choice of fonts and styles in “Early Access” here. Let’s take Mplus.
Next we will write a soft fallback, it means we will use pre-installed system font which better fit to or brand font. We could use this table to know about pre-installed fonts on different devices. For example Hiragino Sans and Hiragino Kaku Gothic Pro for macOS and Yu Gothic, MS Gothic for Windows, furthermore we need to write family names in both dual languages due to certain devices or browsers can’t understand when it’s written in English. Also we need to write the hard fallback for other platforms — just font type Sans-serif.
The full code for font-family will look like this:
font-family: 'Montserrat', 'Mplus 1p', 'Hiragino Sans', 'Hiragino Kaku Gothic Pro', '游ゴシック' , '游ゴシック体' , YuGothic , 'Yu Gothic', 'ＭＳ ゴシック' , 'MS Gothic', sans-serif;
Tips and tricks
- Refrain from using heavy external fonts. You need to think about users, even with high-speed Internet your site will be slow. At least try to use limited number of styles in your design.
- Use web-safe/pre-installed fonts as a fallback and font type as well.
- Try to not use external Japanese web font for the whole sentence but only for headings. This approach will decrease blinking and time to text render.
- Don’t use font-size lower than 14pt.
- Set font-weights with unique font-family names
- Japanese text need more space between lines, so use 150% line height or even more.
- Don’t use italic letters because Japanese don’t contain them.
- line length between 15 to ~40 characters for desktop.
- 15–22 cpl for smart phone display.
- Length of a sentence should be 40 to 55 characters.
- Length of a paragraph should not exceed 150 characters.
- Also you could set letter-spacing at 0.05em or 0.15em to ensure legibility.
- If you use justify method for text, make sure that you add
- Use html language attribute or classes to styling Japanese text https://www.linkedin.com/pulse/web-typography-japanese-hayataki-masaharu but yeah it could be very difficult for
- Also important to use font-smoothing.
- Try Yaku Han add-on. Yaku Han removes unnecessary spaces within Japanese punctuation like 、。！？〈〉《》「」『』【】〔〕・（）：；［］｛｝
Most of Japanese don’t care about it though. But some Japanese designers really hate those spaces somehow.
Usually, in Latin, we don’t have so many settings, might be “line-height” and “max-with” for text blocks and text seems okayish. But if you have a foreign language you need to think in the context of this specific language, and if you do at least 50% of these rules, it helps provide a good design not only for a limited part of your users.
Web Typography in Japanese and why it matters https://www.linkedin.com/pulse/web-typography-japanese-hayataki-masaharu
Google Web Font for Japanese https://design.studio-umi.jp/blog/google-web-font-japan
Japanese early access fonts from Google https://googlefonts.github.io/japanese/#mplus1p
Yaku-Han add-on https://bulan.co/swings/yaku-han-jp
Guide to Web Typography in Japanese http://hayataki-masaharu.jp/web-typography-in-japanese/#.WTxBrxPyvUI
Best practice in Chinese layout https://medium.com/@bobtung/best-practice-in-chinese-layout-f933aff1728f
Special thanks to Mana