“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.
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!
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.
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.
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.
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.
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.
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.
Shorter for just a few lines of text, multi-column layouts, and captions. Longer for longer, single-column body text.
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.
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.
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.
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.
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.
