Have you ever found yourself asking…
“Why do Japanese websites look like shit?…”
I can’t tell you how many times I’ve heard this complaint. Our native-English brains and cutting-edge, modern design sensibilities just don’t digest these web pages born in our chosen home.
I’m hesitant to embrace this viewpoint, however, holding onto skepticism and keeping an eye out for insights into the reasons. That said, I too have found myself squinting and struggling faced with particularly hard-to-digest specimens.
And that’s just on the reading side — what about those of us who have to design in Japanese? It’s not an easy language to set type for. Three separate sets of characters, and thousands of glyphs for each font, each different set carrying its own unique nature. This brings lots of trouble when you set a paragraph, as it can be very challenging to balance the different types of characters.
It also means expensive fonts and virtually NO ‘web fonts’, which give great style control to designers of Latin-based content. Even many of my Japanese design comrades complain about Japanese fonts and typography…
- Japanese fonts are so expensive!
- I’m so jealous! English typography seems more fun!
- You just can’t design Japanese websites like you can with English.
Maybe now you’re a step closer to understanding the baffling attempts to include English text on nearly anything you find out here?
If you’ve ever set up a bilingual English|Japanese site, you’ll know the horror of that first vision of your theme’s Japanese side — monstrous headings, awkward contrast, ridiculously long strings of text…
To help you solve this, here are some basic guidelines to work into the Japanese side of any project. Lots of credit to my buddy Hiroki Kato, who often lends his eyes to my work for a better native sense.
- Titles & Headlines:
20~30 pixels will do.
Don’t set these too big! It breaks balance and can be pretty abrasive.
- Body Text:
12~14 pixels feels right.
Once again, things start to look messy at large sizes — smaller type will keep the blocks of text neat and easier to sort for the reader.
Open up some space between sections!
Size contrast between headings and text is a bit weak, and Japanese paragraphs look blocky by default. So keep a breezy separation between sections to enhance clarity and make reading more comfortable.
It might not seem very fun, but stick to web-safe fonts. Here are a couple font stacks I like to use:
font-family: Helvetica,Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic ProN",Osaka,メイリオ,Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif
font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック";
Did you find these guidelines useful or enlightening? Maybe you want to exchange tips on Japanese web typography?
Leave a comment or hit me up on Twitter → @Adrien_web