Hawken King

Japanese text – a guide

Hawken King (March 9, 2008)

Translating Japanese typography to the web.

Many foreign designers in Japan are faced with the un-easy task of formatting Japanese text for bi-lingual or solely Japanese language based websites. By rule we should already understand such principals before embarking, but the rule in this case is far from the norm.

So I shall dish out my limited advice and things I have learned over the years.

0. accessibility.

The reason I list this as “0” is because this should be a given. Using Flash or Images for fonts or (shudder) bodies of text is a no-no. Although any modern web designer worth his or her salt should know this already.

1. Forget windows.

Ignoring the largest user base? In a nutshell, windows is terrible for fonts. That’s why the majority of designers here in Japan use Mac. Windows comes with two Japanese fonts, a serif and a sans serif. That doesn’t leave much room for creativity, especially when the Latin alphabet on the net is doing so well. We have plenty of base English fonts to chose from these days, in part that is helping web2.0 look, web2.0, because they or their variants are installed on both windows and os x by default.
The Macintosh on the other hand has six base Japanese fonts installed, and the two that windows comes with, including variants. Vista is changing things slightly, with it’s new font XXX, which isn’t listed below (because I don’t know what it is).
The bottom line is that windows will never render fonts with the beauty of Mac os x. So this article is mostly for mac users and the options available to us, while safely degrading to windows.

2. Serif & Sans-Serif.

Now that we are forgetting windows to retain relative beauty, here are the fonts one can use on the web, with serif and sans-serif listed accordingly:

Name	Style	Platform	Companion
HiraKakuPro-W3	Sans-serif, thin	Mac	Arial, helvetica
HiraKakuStd-W8	Sans-serif, bold	Mac	Arial bold, helvetica bold
HiraMaruPro-W4	Sans-serif, modern	mac	Verdana
HiraMinPro-W3	Serif, thin	Mac	Times, Tahoma, Georgia
KozGoPro-Bold	Sans-serif, condensed	Mac	Verdana
KozMinPro-Bold	Serif, condensed	Mac	Times
MS-Gothic	Sans-serif, condensed, mono	Mac / win	Courier
MS-Mincho	Serif, condensed, mono	Mac / win	Times
osaka	Sans-serif, normal	Mac	Verdana

3. Firefox vs Safari.

If you were to open illustrator, write something in Japanese, chose a font size and font face, chances are if you programmed the same thing in CSS it would look identical in Safari. Firefox on the other hand renders things totally differently, so careful massaging to make things look right is required. Here are the CSS font names for each browser accordingly:

Safari name	Firefox 2 name
Hiragino Kaku Gothic Pro	ヒラギノ角ゴ Pro W3
Hiragino Kaku Gothic Std	ヒラギノ角ゴ Std W8
Hiragino Maru Gothic Pro	ヒラギノ丸ゴ Pro W4
Hiragino Mincho Pro	ヒラギノ明朝 Pro W3
Kozuka Gothic Pro	KozGoPro-Bold
Kozuka Mincho Pro	KozMinPro-Bold
MS-Gothic	ＭＳ ゴシック
MS-Mincho	MS-Mincho
osaka	osaka

As you can see, getting that all important Helvetica / arial bold companion to work is a little tricky.

4. How to write the CSS:

In this example, I’ll show you how to cater for Safari and Firefox, using the same font (yes they have to call the same font in different ways). This is a header, with arial Bold being the respective Latin alphabet font:

The last two fonts on that list are catering for windows, as it doesn’t have a bold Japanese font or Helvetica. It will choose MS-Gothic and use Arial for the any English text, instead of MS-gothic’s ugly condensed mono-space. Notice how I’m calling “W6” although it’s not on the list of fonts above. Fortunately one can specify weights for Safari.

5. Font size and line height.

Getting user feedback is crucial for understanding what is actually readable on the web. In recent years the 100% font size of 1em has become the accessibility norm. We designers have grown out of our illegible 9 pixel fonts and embraced large text on the web. It’s all very well for the Latin alphabet, it looks nice. Japanese text on the other hand looks childish when set to 100%. In fact the average Japanese reader prefers something a little smaller.
Line heights are another thing to consider, make sure you have a line spacing at least 50% of the height of your font. Internet explorer will also give you shorter line heights so it’s worth writing and extra style hack for this.
At the end of the day, it’s a judgment call. Ask a few people for feedback. Sometimes big works.

6. Suggested reading.

My only advice here is pick up Japanese magazines and read read read. How are we ever to understand how Japanese text works without actually reading it? My favorite magazines for this have to be “イアヂア” and “Brutus”. They offer regular insight to how designers write, and how they understand and use information. Which essentially what we are dealing with; the internet is information.

In closing.

Many people ask me why do Japanese websites suck so badly? The answer is not complex; by modern standard most Japanese websites fail on accessibility and standards. This is because web browsers are not built for Japanese text, so designers shove everything into flash or images to give them greater control. I am here to change things. To educate. That’s why I continue to make Japanese language websites that validate. There is hope on the horizon, in the form of CSS3 – but when and if that happens, well lets just say I’m not holding my breath.

Of course I am not infallible, so there will be times when none of this works. Many thanks to Erik Johansson.