Seven rules for perfect Japanese typography

“Our product has traction in Japan! What now?”

If you find yourself asking this question, you’re in good company. Japan is an amazing place to have a following, as many startups have discovered. With 115 million internet users and a sophisticated consumer culture, anything is possible here. Twitter, for example, who invested early in Japan-specific research, content, product and marketing, grew from 7 to 35 million users in the last five years.

115 million internet users — Internet penetration in Japan stands at 90.6%.
115 million internet users — Internet penetration in Japan stands at 90.6%. Source: Internet Live Stats (www.InternetLiveStats.com)

As a product design studio based in Tokyo, we’ve helped teams around the world navigate the massive opportunity and unique cultural challenge that Japan represents.

A year ago, Medium began to explore how it could better serve Japan, working with local editors and ambassadors to support writers. Recently, we sat down with Luke and Marcin from Medium’s international and design teams to map out what to do next: information architecture? UI translation? help content? After looking at the product from every angle, we realized what was most important: typography!

Pinterest looked at Japanese typography as part of a redesign to fuel international growth.

Why type? In our 12 years of research, careless Japanese typography has consistently hurt perceptions of product quality, yet it usually takes teams years to address the problem. We’ve heard Japanese users described products as “unnatural”, “foreign”, and “suspicious.” Pinterest, in Japan since 2013, began refining Japanese type last year after an employee described their homepage as “when someone tries to overcome a language barrier by talking louder.”

The work to get from unnatural to perfect is not hard, and there are more interesting challenges for you to spend time on, so we’ve put together a little primer to get you most of the way there. (If you want to go further, we’re happy to help.

Designing in Japanese

Written Japanese consists of thousands of characters across four character sets, hiragana, katakana, kanji and the latin alphabet. The four character sets are used in combination within the same sentence, each with its own purpose and rules, as well as its own visual weight and texture. Visually complex kanji combine with each other to represent most objects, ideas and actions. Flowing hiragana connects and conjugates kanji among other uses, while angular katakana represents non-Japanese proper nouns and concepts.

Underlined in purple are kanji, of which there are many thousands, about 2000 are used in everyday Japanese. In blue and green respectively are Hiragana and Katakana, of which there are 48 each.
Underlined in purple are kanji, of which there are many thousands, about 2000 are used in everyday Japanese. In blue and green respectively are Hiragana and Katakana, of which there are 48 each.

In my former work as a print designer, I often worked into the early hours of the morning, carefully combining fonts, replacing characters, tracking and kerning, to achieve a expressive, readable body of text.

As a UI designer, none of these techniques are reliably available to me. The major operating systems have only a few font families each, with nearly no overlap. Web fonts, now a common luxury in English, are still unviable in Japanese if you are designing for speed. Even kerning tables are not a certainty.

The presence of latin type with Japanese characters is a common practice, there are often multiple ways to represent more modern words — fully latin, half in latin or a complete conversion of the word in katakana.
The presence of latin type with Japanese characters is a common practice, there are often multiple ways to represent more modern words — fully latin, half in latin or a complete conversion of the word in katakana.

To date, these limitations have reduced design diversity and created a different, arguably less beautiful standard for Japanese text on the screen. If you are a designer new to the language however, these limitations might be helpful constraints as you begin to become familiar with the fundamentals of the language, and learn to see when something looks right.

A few simple rules for perfect Japanese typography

A simple pairing of Yu Gothic & Ideal Sans creates a harmonious flow from Latin to Japanese characters line by line.

1. Match sans serif with gothic, serif with Mincho.

There are dozens of type styles in Japanese, but like English, only two dominant and readily available. Gothic families share the aesthetic and functional qualities of sans serif Latin typefaces, and Mincho those of serif. Adding one of each to your respective font stacks will result in a harmonious combination of Japanese and Latin characters within the text.

2. Don’t use italics.

Italics don’t exist in Japanese, but CSS italic rules will force an unnatural-looking oblique on Japanese text in some browsers. Use font weight variation or brackets to offset Japanese text as you would with italics.

3. Keep line length between 15 and 35 characters.

Shorter for just a few lines of text, multi-column layouts, and captions. Longer for longer, single-column body text.

Japanese characters are more readable within at certain line lengths. At this size 50 characters is too long, 10 is too short but 30 is just right.
Japanese characters are more readable within at certain line lengths. At this size 50 characters is too long, 10 is too short but 30 is just right.

4. Justify your text, once browsers catch up.

In print, body text is almost always justified, the most natural treatment of the predictable width of Japanese characters. Screen rendering engines still don’t know how to deal with inline URLs, creating huge white gaps in the text, but hopefully they will soon.

5. Reduce font sizes by 10, 15%.

The full-cap height and square profile of Japanese characters make them appear larger than the Latin alphabet. Compensate by reducing your body text by around a bit, and your headlines by a bit more.

A 10%/1pt decrease in type size on Japanese type makes the Japanese paragraph appear much more similar to the Latin.
In this image you can see Japanese (Hiragino Mincho Pro w3) looks too big next to English (Times New Roman) of the same font size. A 10%/1pt decrease in type size on Japanese type makes the Japanese paragraph appear much more similar to the Latin.

6. Increase line height by around 10, 15%.

The high-density, square profile characters of Japanese need more breathing room between lines to allow the eye to travel across the page without jumping lanes.

Increases to line height must be balanced against decreases to font size, however. With shorter line lengths, you may only need to adjust one of the two. And if you are setting columns of Japanese and Latin text side by side, changes to line height will disrupt the harmony of the page, so you’ll want to reduce font size first.

7. Stick with horizontal.

It is true that Japanese is set both horizontally and vertically, sometimes on the same page. Vertical typesetting is well suited to the horizontal flow of scrolls and printed texts, but is awkward to read and paginate in apps and websites which scroll vertically, which is most outside of e-readers.

Preview of A Primer on Japanese Typography

A big ありがとう to Medium for letting us publish this, and to Craig Mod, Ian Lynam, Tomoyuki Ishida, Jihun Lee and Raphaël Mazoyer for reviewing.