Japanese Typography, Apple Maps and the Art of Using Color Kanji

Virtual Body vs. Baseline
To understand the basic differences between Japanese and Western typography, you have to go back to elementary school. Think back to second grade when you were just learning cursive; the teacher gave you a piece of paper with lines. This was the bottom line, that was the top line. She taught you to write along the bottom line.

• 

• 

In Japan, the students get a piece of paper with rows of little boxes. The teacher tells the kids to write Kanji characters in the centers of the boxes. Japanese typographic layout is exactly the same; it is all based on little boxes, known as virtual bodies. It is also called the grid system, because the middle of each box is one center point on a grid. Everything is calculated from the center; there is no baseline. The whole system makes sense when you realize it all comes from the days of block type; the virtual bodies are exact uniform blocks of metal type set end to end. The vocabulary, the measurements and the aesthetics all evolved from that.

Unlike DTP layout, which is graphics-driven, traditional Japanese text composition, called kumihan, is driven by how much text will fit in a given space. Designers know how many characters (virtual bodies) are supposed to be on a line and on a page before they start composition, and this is how they discuss layout with writers and editors. Western composition is calculated from margins, a wholly different concept.

In traditional Japanese composition it is very important for operators to know the number of characters on each page but it was very difficult to work that way with baseline-only western developed DTP software such as PageMaker and Quark XPress and is still that way with Illustrator. PostScript Japanese fonts (OCF, CID, OpenType) have no virtual-body information whatsoever, and as explained above, there is no baseline in Japanese kumihan.

But since OpenType and TrueType fonts have only baseline information, that’s how all DTP software developed.The problem for Japanese operators is that because Japanese fonts have different baseline positioning if they change the font, the line breaks change.

With a traditional grid system, so as long as the operator kept the same size, any font line breaking stayed uniform. And even if they did change the size, the grid made it very easy to make adjustments.

If an operator tries to calculate grids with software that does not support it, any software outside of InDesign J basically, the point system doesn’t match well so the page invariably ends up with too few or too many characters. The designer compensates by incrementing in 01-point values which is overkill and wastes precious production time.

Character and Line Processing
Another basic Japanese kumihan function to know is called Ji-Dori-Gyo-Dori. In traditional systems the priority is:

1. Calculate additions to the previous line, if the first character of the next line is a punctuation mark.
2. Calculate the shift kana so the first character of the next line is not a punctuation mark.
3. Calculate the average spacing of each kana.

This sounds easy to do, but it’s not, for two reasons. First, as noted above, everything is calculated from the virtual body’s central grid point. Second, there are special sets of punctuation characters and Kanji known as “Classes.” Traditional systems had these highly specialized line-breaking rules and Class settings built in, and would automatically calculate and adjust the spacing very quickly. They were also very good with mixed Japanese and English, which is half-width: two Roman characters equal the width of one Kanji.

Line processing and mixed Japanese/English is easy to get wrong. One example of poor Japanese typography is Apple’s recent transition from Myriad to San Francisco J web font branding on their Japanese site. The Japanese Industrial Standard typesetting and composition specification JIS X4051 is the bible of Japanese composition and the only truly complete specification for vertical text composition in the world.

Adobe InDesign J was the first, and to date the only, western layout software to fully implement the X4051 specification. One of the neat tricks that InDesign J has is that it creates virtual body Japanese font information on the fly using proprietary Adobe technology. These are the reasons Quark XPress lost the Japanese market to InDesign ten years ago.

JIS X4051 has never been formally translated from Japanese but major portions are in the W3C Working Group English language document: Requirements for Japanese Text Layout. Some of the Japanese terms are loosely translated, virtual bodies are translated as Imaginary bodies, but it is a good overview in English.

Kanji in the Box
Study Kanji and the first basic principle you learn is strokes: the number or strokes and stroke order. The more strokes, the more you have to fit in a fixed space. The maximum number of Kanji style ‘strokes’ for a western character is four while a Kanji can easily be more than ten. Here is an example:

It is important for designers to understand the difference and keep it in mind when working with Japanese typography. Unless the designer takes careful steps, Japanese text quickly becomes unreadable at smaller sizes especially when overlaid on colored backgrounds.The  best example for keeping Japanese text legible against a varied background is the humble, lowly supermarket chirashi: the supermarket ads inserted in the daily newspaper that end up as kitty litter box liner. Supermarket chirashi are the meat and potatoes of Japanese printing companies big and small and the first work that new to the job employees and designers cut their teeth on.

As seen above there is lots of text and color going on but the Japanese typography is legible even at small sizes. It has to because the local grandma brigade is going to stampede the supermarket with this chirashi in hand to get those specials.

Look carefully and you’ll see two simple design rules are strictly followed:

• High contrast maintained between Kanji and background in all cases even when the Kanji characters or background are colored.
• Shira-nuki extensively used to make sure Kanji text retains high contrast when overlaid on widely colored backgrounds. Shira-nuki is the white outline reversed text effect.

These are basic typography practices used by designers around the world. Let’s compare the big three Japanese map services: Apple Maps, Google Maps and Yahoo Japan Maps and see how they apply these basic typographic principals in their cartography.

• 

• 

Yahoo Japan Maps
It is no surprise that the native product Yahoo Japan Maps has the best Japanese typographic design. High contrast is maintained at all times with colored Kanji use reserved for important transportation name labels: stations, expressway, airports, etc. Even the color Kanji maintain a high contrast with an appropriately thick white shira-nuki outline. The only poor color Kanji choice is the light blue used for intersection names.

Yahoo Japan Maps Japanese Rating: O (maru/good)

• 

• 

Google Maps
Google has a good reputation but they don’t always get things right. For the most part Google uses high contrast black Kanji on white-ish background, but when they use color Kanji they get it wrong in a big way: the light blue low contrast Kanji station name is poor typographic design and very odd because important station names are the very thing that should stand out from the surrounding sea of details. The station name here is illegible.

A closeup view shows weak, thin shira-nuki, another poor design choice that does nothing to increase the contrast. The other color Kanji, reddish tint for hospitals and clinics, also suffer from the same poor design choice.

Google Maps Japanese Rating: ∆ (sankaku/meh) 

• 

• 

Apple Maps
Apple uses color Kanji everywhere and gets it very wrong. All the Kanji text is low contrast with weak shira-nuki. On the plus side the Apple Maps public transit team has improved Kanji labels in the public transit view. I hope Apple continues to fix and polish the Japanese typography and cartography across their entire map product.

Apple Maps Japanese Rating General View: X (peke/fail)
Apple Maps Japanese Rating Transit View: ∆ (sankaku/meh)

• 

• 

Wrap-up
I created some simple Kanji text labels with shira-nuki using the Apple Maps color label scheme: red for medical services, orange for stores, brown for public buildings, etc. Note the legibility difference between black Kanji and color Kanji against the various backgrounds at different text sizes. Shira-nuki can really help improve contrast and readability but it will not save you from bad design choices.

Good typography, and good cartography, is all about making text as simple and clear as possible. Do that and you’ll never go wrong. The fine art of using color Kanji is not using them at all.

More Japanese typography discussion here.