Creating Balanced Typographic Design in Bilingual Websites
When it comes to multilingual websites & apps, balance in typography really matters.
For example, when switching between Japanese, Chinese, and English, the contents of each view should be visually balanced depending on the glyph. “Kanji” in Chinese and Japanese is a logographic system, and it is usually larger than the alphabetic letter at the same font size. In this article, we will share some considerations for typographical balance for English/Japanese sites and will share considerations about Chinese in the future.
A common technique is to reduce the kanji font-size by 2 pixels since it’s “easy“ for everyone. The designer provides the UI in English, then leaves it to the developer and QA. What if there is no one familiar with all languages? How can we tell if the typography is good enough to a different language? In practice, the “2 pixels” solution is too simple to apply globally. Localizing contents of the application is not translation only. Keeping the same typesetting between languages often breaks the layout or at least impacts the visual experience.
How then, can we bridge the gap?
Font Size Scale and Legibility
In a recent project, we balanced the typography between English and Japanese before thinking about colors, layouts, and functions, rather than tweaking after development.
As illustrated above, we aligned “San Francisco” (the latest default system typeface in Apple’s OS) with “Hiragino Sans” by cap-height. As you can see, the baseline hits the bottom of kanji. Inspecting the headings leads to the interesting observation that kanji at the “heading 4 / 20px” is not linearly scaled.
Compared to alphabetic letters, the glyph of a kanji is usually not so minimalistic. Strokes are going to be crowded when rendering them at a small size. Thus, the “common” difference is reduced for legibility concerns.
Meanwhile, the size of regular type in English is 16px, while in Japanese it is 15px. By setting up the same line-height of 24px, both have excellent readability.
Tracking Difference and Readability
Tracking is another factor that improves readability in English as well as Japanese. By reducing the space of letters properly, headings are emphasized and differentiated from the body text, particularly when the heading has the same font-weight as the body. On the other hand, when enlarging the letter-spacing in Japanese between kana or kanji to kana, it usually increases the readability (this, of course, depends on the chosen font-face). Here we have an extra 0.6 point letter-spacing for Hiragino Sans in body text rendering.
It looks good! However, in English and Japanese, it is somehow still not balanced enough, which tells us that “measure” matters!
Measure in The Design System
Every language has its best range of line-length for readability. If you indulge lines to be full width all the time, you may give your readers whiplash while reading on their 5K screens.
Generally, for English, the best range is 45-75 characters (148-1110 pixels by the font and letter we use). For Japanese, it is 15-40 characters (234-624 pixels). We chose 512px as the default width for the container of body text in our typesetting (the engineers on our team happen to like that number). Moreover, we noted that it is a consistent factor in the design system. The width of 512px provides good readability regardless it’s a desktop or tablet device.
As we can see, Japanese typography has its own concerns. There’s no simple rule that applies to all languages. And this is the reason we need to balance the typography in different languages. It would be efficient if we design the typography wisely.