Best Practices for Chinese Layout

Bobby Tung
Oct 27, 2014 · 6 min read

10 Principles to let long-form articles more readable

If you are going to expand your service into Asia. First, you may see the language wall (and then the Great Fire Wall). CJK have different layout rules. Requirements for Japanese Text Layout is a good reference, but it might be too long to read it over. Requirements for Hangul Text Layout and Typography is ok. And I'm still writing the draft of Requirement for Chinese Text Layout.

Before I get the document done, there are 10 principles for you to do Chinese layout well.

1, Punctuations differ.

As a designer, there's lots of Chinese fonts, how can you tell them Traditional or Simplified?

It's easy. Type a full-width comma and period. If the punctuations in the middle, that's Traditional; and in the left-down corner as Japanese, that's Simplified.

And remember, all punctuations should be full-width.

Image for post
Image for post

2, Use the right fonts

  • Punctuations not for Traditional Chinese.
  • Adobe Japan 1-6 do not contain some characters in Traditional, and lots of them in Simplified. Fallback will let your article looks like a black mail.
  • 漢字(Hanzi/Kanji) is used in Japan, China, Taiwan/HongKong and Vietnam. They have differences in between.
Image for post
Image for post
Glyphs differ between Tradition and Simplified Chinese.

I'll list system fonts for OS X / iOS / Windows and Android for you to choose the right font. Some of them not available for old version systems, and in iOS App, you have to do extra works to download them from Apple.

Image for post
Image for post
Chinese System Font in Latest OS (updated 2015/11/7, OS X El Capitan/iOS 9/Android 5.0)

For Android, Droid Sans Fallback is pain for CJK. If you want to get typography better, Noto Sans will be good solution, unfortunately the CJK fonts are so huge that you have to subset them for decrease loading time. You can also try dynamic subsetting webfont service like iFontCloud. Or just forget Android *sigh*.

3, Proper line-height.

But line-height has the magic number. Usually between 1.5 to 2.0em. you can just type:

p { line-height: 1.7em; }

and it's done.

4, Justify is elixir.

Image for post
Image for post

Here is a old Chinese movable type(by wood!), and shows a important Chinese Layout principle: all components are square characters.

But in 20th century, punctuations are used in publishing. And modern desktop publishing tools applied “prohibition rules(禁則處理)” from Japan to avoid period, comma… cannot appear in start of the line. And English words are written together. So that we cannot align everything horizontally and vertically. But at least, Start and End of the line should to aligned well. That’s why justify is important for eBook and long-form articles.

In CSS, you can try:

p { text-align: justify;
text-justify: inter-ideographic; /*IE*/}

it will make Chinese layout more beautiful immediately.

5, No italic/oblique.

Image for post
Image for post
Cursive script in Chinese

Not till the digital age, you never see Chinese characters in italic/oblique style. And it should not exist. Some times, default style for certain tags like <em>, <blockquote> may use default italic style for Chinese characters, please correct it by CSS:

em { font-style: normal; }

<em> can be bold, sans-serif, but not italic/oblique.

6, Paragraph separation.

  1. Bookish

In Chinese print books, there’s always no blank between paragraphs, and two characters indent is nessesary. That is:

p { margin: 0; text-indent: 2em;}

You can also use Japanese way, two U+3000 [ideographic space] to replace text-indent. Especially when some tools like Safari’s reader that may override your style, this way will keep the indent.

This style is suitable for eBooks.

2. WEBish

But when people skim on web, bookish layout may let them stressful. You can just add margin-after(or margin-bottom) to separate paragraphs. That is:

p { margin-after: 0.5em;}

Remember, don’t leave too much blank in between. More than 0.5em, less than 1em is nice.

7, Kai is more bookish.

Image for post
Image for post
Kai is used for citation in a Chinese poem textbook

Usually for blockquote, quotation, citation, dialogue, monologue…we used "Kai(楷書)" . Most desktop operation system contains default font for Kai, so use it if you like your content more bookish to readers.

Otherwise, sans-serif is also acceptable.

8, Break-all v.s. prohibition rules.

Image for post
Image for post
Justify with long latin word with Chinese
  1. short column like magazine layout, and also on your phone;
  2. there is a long latin word(or a lot of them) inline with Chinese characters;
  3. justify.

You can see the left picture, letter-spacing is expanded by justification, even more than 1em! It happens in layout software also on web browsers.

For a quick solution, just add :

p { word-break: break-all; }

could help a lot. But consequently, break-all will also break prohibition rule, let comma, period go to the start of lines. But that's fine for Traditional Chinese, but not for the Simplified.

Image for post
Image for post
With Word-break: break-all. It's better but break some rules.

Why? Because punctuations in Simplified Chinese is on the left-bottom as in Japanese. When they appear in the line start, just weird.

9, Careful about letter-spacing.

Image for post
Image for post
Bidi…Bidi…Bidi…

Why? It’s a bi-directional issue. Chinese can be written horizontally and vertically. line-height is the only cue for reader to know how to read it. If you add letter-spacing, you must add more line-height. Finally, the article is just unreadable. So:

No Kerning, no letter-spacing for body text but heading.

10, Simplified to Traditional not ok, but Traditional to Simplified works.

Image for post
Image for post

Here's a table for you to know the frequently used words in Traditional and Simplified Chinese. There's some problem that characters may have different code point from one to another. But most tools that let you convert just work with table to match.

But there’s 267 characters in Traditional Chinese will be altered from SC→TC. Here’s the example:

  • TC→SC:皇后、後世→皇后、
  • SC→TC:皇后、后世→皇后、
  • TC→SC:呂布→呂布
  • SC→TC:呂布→呂

So if you want to do the simple convert, you must use a dictionary-based converter for that. Or you have to do proof reading.

That's all, Not quite hard to complete it, just do.

中文版|Chinese version)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store