A Chinese typography experiment
漢字排版測試
By Chen Hui Jing / @hj_chen
So I built something...
Inspired by Jen Simmon's tweet
Writing systems
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
Sort of (but not really) the serif of Chinese fonts
MingLiU, SimSun
Font classifications - HeiTi
Sort of (but not really) the sans-serif of Chinese fonts
Microsoft JhengHei, Microsoft YaHei, SimHei, PingFang
Font classifications - KaiTi
Probably can think of this as a script font
DFKai-SB, KaiTi (SimKai), BiauKai
Font classifications - YuanTi
Equivalent to rounded sans-serif fonts
YuanTi, doesn't seem to be a Windows default
Font classifications - FangSong
Has slanted horizontal strokes, unlike SongTi
FangSong, STFangSong
Font classifications - 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)
Basic terminology (2/2)
writing-mode
| horizontal-tb | 从1987到现在 |
| vertical-rl | 从1987到现在 |
| vertical-lr | 从1987到现在 |
| sideways-rl* | 从1987到现在 |
| sideways-lr* | 从1987到现在 |
text-orientation (1/2)
text-orientation (2/2)
text-combine-upright
Typography suggestions
- Use and declare the correct font-family
- Make sure the font-size is large enough
- Set
line-heightfor sufficient breathing room - Use
text-align: justify - Keep lines to around 30-40 characters
- Set a
margin-bottomfor thepelement
