A Chinese typography experiment

漢字排版測試

By Chen Hui Jing / @hj_chen

So I built something...

Demo screenshot Inspired by Jen Simmon's tweet

Writing systems

Writing directions of the world

Chinese characters and layout

Traditionally runs from top-to-bottom, right-to-left

2 types of glyphs, traditional and simplified

捨己為人 versus 舍己为人

Horizontal layouts are commonplace now though

Font classifications - SongTi

宋体 (SongTi)

Sort of (but not really) the serif of Chinese fonts

MingLiU, SimSun

Font classifications - HeiTi

黑体 (HeiTi)

Sort of (but not really) the sans-serif of Chinese fonts

Microsoft JhengHei, Microsoft YaHei, SimHei, PingFang

Font classifications - KaiTi

楷体 (KaiTi)

Probably can think of this as a script font

DFKai-SB, KaiTi (SimKai), BiauKai

Font classifications - YuanTi

圆体 (YuanTi)

Equivalent to rounded sans-serif fonts

YuanTi, doesn't seem to be a Windows default

Font classifications - FangSong

仿宋体 (FangSongTi)

Has slanted horizontal strokes, unlike SongTi

FangSong, STFangSong

Font classifications - MeiShuTi

美术体 (MeiShuTi)

All kinds of fancy display fonts

OSX has more of those included by default

Using Chinese fonts

Typical Chinese font family has at least 20,000 glyphs

System fonts are still the most practical option

2 webfont services available: JustFont and YouZiKu

Declare your target English fonts first

Basic terminology (1/2)

Horizonal left-to-right Vertical right-to-left Vertical left-to-right

Basic terminology (2/2)

西
Vertical flow
马来西亚女子篮球队
Rotated horizontal flow

writing-mode

horizontal-tb 从1987到现在
vertical-rl 从1987到现在
vertical-lr 从1987到现在
sideways-rl* 从1987到现在
sideways-lr* 从1987到现在

text-orientation (1/2)

陈慧晶陈慧晶
Rotate
陈慧晶
Translate

text-orientation (2/2)

从1987到现在
mixed
1987到现在
upright
从1987到现在
sideways

text-combine-upright

民國101年7月22日
none
民國101722
all
民國101722
digits <integer>*

Typography suggestions

  • Use and declare the correct font-family
  • Make sure the font-size is large enough
  • Set line-height for sufficient breathing room
  • Use text-align: justify
  • Keep lines to around 30-40 characters
  • Set a margin-bottom for the p element

To find out more...

THE END

Websitehttps://www.chenhuijing.com

Twitter@hj_chen

Medium@hj_chen

Codepen@huijing