2016MOPCON@高雄 http://hackfoldr.org/mopcon2016/https%253A%252F%252Fhackmd.io%252FIYdgRgxgjAHFCcBaApmExEBYAmYaLACZ4A2RCCAVhBJNXiigDMg%253D%253Fboth

1. 幾個中文排版訣竅
有效改善閱讀體驗
WANDERER
董福興

2. 為什麼要在乎排版？

3. 我們每天多數的時間
都在螢幕上閱讀文字

6. 已經十年了！

7. 做好排版：
小小改變，
大大加分！

8. 受到西方與東方影響
的中文排版

10. !"
桌上出版

11. #
Web
!"
桌上出版

13. 來自"的影響
• 避頭點規則：，。」』）等不得出現在行首；
「『（等不得出現在行末。
• 標點擠壓：遇到。」等狀況時，可以切割合併佔
一個全形位置。
• 標點懸吊（少見）：，。等為避頭點可以懸掛到
版心之外，突出一字。

14. 來自#!的影響
• 超小字體：一堆模板內文字預設為8pt，甚至小到
7pt，難以閱讀。
• 段落間距：幾乎所有的瀏覽器都預設p的前後
margin為1em。
• 段首不縮：因為上面影響，所以在Web上幾乎很
少見到段首縮排二字（或一字）。

15. 中文排版需求
是什麼？

16. 制定規格
國際化工作小組
Internationalization WG
= i18n WG
無障礙工作小組
Accessibility WG
= a10y WG
規格檢查

17. 日文排版需求
Requirements for
Japanese
Text Layout
2008/4/11公佈
迄今持續修訂中

18. 中文排版需求
Requirements for
Chinese
Text Layout
2015/7/23公佈
銳意編輯中😓

19. ＢＵＴ！

20. 文長，慎入
ＴＬ；ＤＲ

21. 講個訣竅！

22. 字字
楷
⿊黑仿 強調
我是標題

23. 字級大小字字
• 問題：字體到底要多大才「易讀」？

24. 字級大小字字
Old Good Days
72pt = 1英吋
Classic Mac = 72dpi

25. 從鉛字的號數尋找線索……

26. 字級大小字字
字號 ⽤用途 點數 實際尺⼨寸
換算px
（MBP）
五號字
內⽂文
（⼤大字）
10.5pt 0.369cm 16.5px
新五號 ⼀一般內⽂文 9pt 0.316cm 14px
六號字 註解圖說 8pt 0.281cm 12.5px

27. 字字
楷
⿊黑仿 強調
我是標題

28. 字體配置楷
⿊黑仿
• 桌上系統：
• Windows：新細明體、微軟正黑體、標楷體。
• macOS：蘋方繁、宋體繁、楷體繁⋯⋯
• 行動裝置：
蘋方繁、思源黑體（Not for all Android）😫

29. 字體配置楷
⿊黑仿
字體 ⽤用途 優點 缺點
⿊黑體
ＵＩ、標題、
強調、圖說。
視認性⾼高
字重多變
變化較少
明（宋）體 標題、內⽂。 較具「⽂氣」 字重差異不⼤
楷體
標題、內⽂*、
摘⾔、注釋。
較為正式 視認性差
仿宋 內文**、摘言。 較為雋秀 視認性更差
* ：台灣政府公文內文規定要使用楷體
**：中國黨政文書內文規定使用仿宋

30. 字體配置楷
⿊黑仿
字體 ⽤用途 優點 缺點
⿊黑體
ＵＩ、標題、
強調、圖說。
視認性⾼高
字重多變
變化較少
明（宋）體 標題、內⽂。 較具「⽂氣」 字重差異不⼤
楷體
標題、內⽂*、
摘⾔、注釋。
較為正式 視認性差
仿宋 內文**、摘言。 較為雋秀 視認性更差
* ：台灣政府公文內文規定要使用楷體
**：中國黨政文書內文規定使用仿宋

31. 字體配置楷
⿊黑仿
字體 ⽤用途 優點 缺點
⿊黑體
ＵＩ、標題、
強調、圖說。
視認性⾼高
字重多變
變化較少
明（宋）體 標題、內⽂。 較具「⽂氣」 字重差異不⼤
楷體
標題、內⽂*、
摘⾔、注釋。
較為正式 視認性差
仿宋 內文**、摘言。 較為雋秀 視認性更差
* ：台灣政府公文內文規定要使用楷體
**：中國黨政文書內文規定使用仿宋
Try
Web
font

32. 字體配置楷
⿊黑仿
字體 ⽤用途 優點 缺點
⿊黑體
ＵＩ、標題、
強調、圖說。
視認性⾼高
字重多變
變化較少
明（宋）體 標題、內⽂。 較具「⽂氣」 字重差異不⼤
楷體
標題、內⽂*、
摘⾔、注釋。
較為正式 視認性差
仿宋 內文**、摘言。 較為雋秀 視認性更差
* ：台灣政府公文內文規定要使用楷體
**：中國黨政文書內文規定使用仿宋
Try
Web
font
@media only screen and (min-device-pixel-ratio: 2){}

33. 字體配置楷
⿊黑仿
矽谷
⽜⾓
日文字型
小塚明朝
簡中字型
宋體簡

34. 字體配置楷
⿊黑仿
矽谷
⽜⾓
日文字型
小塚明朝
簡中字型
宋體簡

35. 字體配置楷
⿊黑仿
矽谷
⽜⾓
日文字型
小塚明朝
簡中字型
宋體簡

36. 字字
楷
⿊黑仿 強調
我是標題

37. 強調文字強調
少用樣式強調
多用語意強調
<b> <i> <u>
<em> <strong>

38. 強調文字強調
少用樣式強調
多用語意強調
<b> <i> <u>
<em> <strong>

39. 強調文字強調
少用樣式強調
多用語意強調
<b> <i> <u>
<em> <strong> &

40. 強調文字強調
沒有斜體
不用徬點
明體加粗
不夠明顯
有個 要說
有個重點要說
• •
有個重點要說

41. 強調文字強調
沒有斜體
不用徬點
明體加粗
不夠明顯
有個 要說
有個重點要說
• •
有個重點要說

42. 強調文字強調
沒有斜體
不用徬點
明體加粗
不夠明顯
有個 要說
有個重點要說
• •
有個重點要說

43. 強調文字強調
沒有斜體
不用徬點
明體加粗
不夠明顯
有個 要說
有個重點要說
• •
有個重點要說

44. 強調文字強調
改變字型
黑體加粗
加上底線
有個重點要說
有個重點要說
有個重點要說

45. 字字
楷
⿊黑仿 強調
我是標題

46. 段落對齊
上個⽉月我到德國
（Deutscheland），到了了機
場，發現德⽂文寫作flughafen，
然後搭⾞車車到了了法蘭蘭克福中央⾞車車
站Frankfurt Hauptbahnhop。
買票花了了不少時間。
上 個 ⽉月 我 到 德 國
（Deutscheland），到了了機
場，發現德⽂文寫作flughafen，
然後搭⾞車車到了了法蘭蘭克福中央⾞車車
站Frankfurt Hauptbahnhop。
買票花了了不少時間。
text-align: justify;
問題1：避頭點
問題2：中西混排

47. 段落對齊
避頭點
' ，這樣下去不⾏啊。
" 、そうはいかない。
( ，这样下去没法干。
繁體中文真的不一定需要強制避頭點……
word-break: break-all;

48. 段落對齊
避頭點
' ，這樣下去不⾏啊。
" 、そうはいかない。
( ，这样下去没法干。
繁體中文真的不一定需要強制避頭點……
word-break: break-all;

49. 段落對齊
Hyphenation
上個⽉月我到德國（<span lang="de">Deutscheland</span>），
到了了機場發現德⽂文寫作<span lang="de">flughafen</span>，然
後搭⾞車車到了了法蘭蘭克福中央⾞車車站<span lang="de">Frankfurt
Hauptbahnhop</span>。買票花了了不少時間。
1，HTML開頭已經宣告語言zh-TW
2，內文字應該給予lang標籤宣告
3，-webkit-hyphens: auto;

50. 段落對齊
Before
After

51. 段落對齊
Before
After

52. 字字
楷
⿊黑仿 強調
我是標題

53. 段落間隔
傳統活版段落間不空行

54. 段落間隔
但是幾乎所有的瀏覽器
都會加上段落間距
⋯⋯然後大家都不reset一下的⋯⋯

55. 段落間隔
書籍排版加間距的狀況
• 序、跋、語錄：每一句話都有停頓，所以不完全
是前後連貫的敘述。
• 區分小節：章、節之外，敘述與語氣停頓處，加
一整行來做出區別。

56. 段落間隔
網頁可以怎麼做？
• 電腦、平板：每一段之間還是加上間距，但間距
不要大於「字級＋行距」（例如line-height: 1.8，
margin就不要大於1.8em）。
• 手機：不妨不加間距，改用段首縮排來處理（例
如text-indent: 1em/2em;）。

57. 段落間隔
看到東西被⽕吞噬，焦⿊然後變形，有⼀種特別的快感。他⼿握銅製噴
嘴，⼿中這條巨蟒把毒液般的煤油噴向世間，⾎液衝上他的頭部，他的
雙⼿就好似某位令⼈讚歎的指揮家般，演奏著熾熱燃燒的交響樂，把⼀
切燒成歷史的殘渣與焦炭。他那⼀臉淡定的頭上頂著編號四五⼀的招牌
頭盔，眼裡全是在想著接下來要燒些什麼的橘⾊⽕焰，然後把點⽕器撥
開，整棟房⼦霎時被⼀道狼吞虎嚥的⽕焰吞噬，把傍晚的天空照得⾚⿈
帶⿊。他邁步⾛向⼀團⽕星，很想要像⽼笑話說的那樣，拿⽕鏟去撥棉
花糖，⽽那些振翅欲⾶的書本就這麼死在房⼦的⾨廊跟草坪上。旋迴的
⽕光隨風吹拂，書⾴在燃燒中變得焦⿊。
蒙塔格露出了所有被⽕焰熾灼逼退的男⼈，必會擁有的勇猛獰笑。他知
道他回到消防隊後，會對鏡中那個貌似⽤燒焦軟⽊塞扮⿊臉，滑稽演員
般的⾃⼰眨眨眼。之後睡覺時，他覺得那抹灼熱的笑容，在⿊暗中依舊
掛在臉部肌⾁上。他的記憶中，那抹笑容從來不曾消退，⼀次也沒有過。
他把他那頂烏⿊的甲蟲⾊頭盔掛起來擦到發亮，把防⽕夾克掛得整整齊
齊的，舒舒服服地沖個澡，然後⼿插⼜袋吹著⼜哨穿過消防局的⼆樓，
直接從升降孔往下掉。直到似⼤禍臨頭的最後⼀刻，他才把⼿從⼜袋裡
抽出來，抓住⾦⾊升降桿，停⽌下落。他吱吱作響地慢慢滑停，腳後跟
離樓下的⽔泥地僅差⼀吋。
他⾛出消防局，沿著午夜的街道向地下鐵⾛去。安靜的氣動列⾞無聲地
順著地表下的管道滑⾏。他下⾞時呼出⼀⼤⼜暖空氣，凝在升往郊區貼
著乳⽩⾊瓷磚的電扶梯上。他吹著⼜哨，讓電扶梯載著他進入凝結的夜
靄中。他往轉角⾛去，腦中沒想些什麼特別的事。但⾛到轉角前，他的
腳步卻慢了下來，就好像無端吹來⼀陣風，又好像有⼈叫著他的名字似
的。
前後頁是兩段還是一段？
電子書排版照書排

58. 段落間隔
電子書排版照書排
看到東西被⽕吞噬，焦⿊然後變形，有⼀種特別的快感。他⼿握銅
製噴嘴，⼿中這條巨蟒把毒液般的煤油噴向世間，⾎液衝上他的頭部，他
的雙⼿就好似某位令⼈讚歎的指揮家般，演奏著熾熱燃燒的交響樂，把⼀
切燒成歷史的殘渣與焦炭。他那⼀臉淡定的頭上頂著編號四五⼀的招牌頭
盔，眼裡全是在想著接下來要燒些什麼的橘⾊⽕焰，然後把點⽕器撥開，
整棟房⼦霎時被⼀道狼吞虎嚥的⽕焰吞噬，把傍晚的天空照得⾚⿈帶⿊。
他邁步⾛向⼀團⽕星，很想要像⽼笑話說的那樣，拿⽕鏟去撥棉花糖，⽽
那些振翅欲⾶的書本就這麼死在房⼦的⾨廊跟草坪上。旋迴的⽕光隨風吹
拂，書⾴在燃燒中變得焦⿊。
蒙塔格露出了所有被⽕焰熾灼逼退的男⼈，必會擁有的勇猛獰笑。
他知道他回到消防隊後，會對鏡中那個貌似⽤燒焦軟⽊塞扮⿊臉，滑稽演
員般的⾃⼰眨眨眼。之後睡覺時，他覺得那抹灼熱的笑容，在⿊暗中依舊
掛在臉部肌⾁上。他的記憶中，那抹笑容從來不曾消退，⼀次也沒有過。
他把他那頂烏⿊的甲蟲⾊頭盔掛起來擦到發亮，把防⽕夾克掛得
整整齊齊的，舒舒服服地沖個澡，然後⼿插⼜袋吹著⼜哨穿過消防局的
⼆樓，直接從升降孔往下掉。直到似⼤禍臨頭的最後⼀刻，他才把⼿從
⼜袋裡抽出來，抓住⾦⾊升降桿，停⽌下落。他吱吱作響地慢慢滑停，
腳後跟離樓下的⽔泥地僅差⼀吋。
他⾛出消防局，沿著午夜的街道向地下鐵⾛去。安靜的氣動列⾞
無聲地順著地表下的管道滑⾏。他下⾞時呼出⼀⼤⼜暖空氣，凝在升往
郊區貼著乳⽩⾊瓷磚的電扶梯上。他吹著⼜哨，讓電扶梯載著他進入凝
結的夜靄中。他往轉角⾛去，腦中沒想些什麼特別的事。但⾛到轉角前，
他的腳步卻慢了下來，就好像無端吹來⼀陣風，又好像有⼈叫著他的名
字似的。
這樣清楚多了

59. 字字
楷
⿊黑仿 強調
我是標題

60. 標題設計
我是標題
• 問題：標題到底要佔多少空間？

61. 標題設計
我是標題
這裡是個中標 4.4em1.2em
1.6em
1.6em

62. 標題設計
我是標題
這裡是個中標

63. 看到東西被⽕吞噬，焦⿊然後變形，有
⼀種特別的快感。他⼿握銅製噴嘴，⼿中這
條巨蟒把毒液般的煤油噴向世間。
⾎液衝上他的頭部，他的雙⼿就好似某
位令⼈讚歎的指揮家般，演奏著熾熱燃燒的
⽉
標題設計
我是標題
焚書作為志業

64. 看到東西被⽕吞噬，焦⿊然後變形，有
⼀種特別的快感。他⼿握銅製噴嘴，⼿中這
條巨蟒把毒液般的煤油噴向世間。
焚書作為一種志業
⾎液衝上他的頭部，他的雙⼿就好似某
位令⼈讚歎的指揮家般，演奏著熾熱燃燒的
⽉
標題設計
我是標題
←這樣的小標也不賴！

65. 標題設計
我是標題
• 目的：標題的目的在於讓讀者建構心
理定錨，知道閱讀進度與結構。一切
以易於理解為主，設計師切記！

66. 字字
楷
⿊黑仿 強調
我是標題

67. 訣竅說完了！

68. 關於設計：
始於規則，
終於創意。