Japanese typography on the web — tips and tricks

Hello mates! Today I want to tell how to provide Japanese language on site

5 min readJun 19, 2017

But first…

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

Fallback

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

word-break: break-all;

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.

Conclusion

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.

=(^_^)=