Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

為什麼要在乎排版？

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

已經十年了！

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

! " 桌上出版

Slide 11

Slide 11 text

# Web ! " 桌上出版

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

中文排版需求 是什麼？

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ＢＵＴ！

Slide 20

Slide 20 text

文長，慎入 ＴＬ；ＤＲ

Slide 21

Slide 21 text

講個訣竅！

Slide 22

Slide 22 text

字 字 ໌楷 ⿊黑仿 強調 我是標題

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

字 字 ໌楷 ⿊黑仿 強調 我是標題

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

字 字 ໌楷 ⿊黑仿 強調 我是標題

Slide 37

Slide 37 text

強調文字 強調 少用樣式強調 多用語意強調

Slide 38

Slide 38 text

強調文字 強調 少用樣式強調 多用語意強調

Slide 39

Slide 39 text

強調文字 強調 少用樣式強調 多用語意強調 &

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

字 字 ໌楷 ⿊黑仿 強調 我是標題

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

段落對齊 避頭點 ' ，這樣下去不⾏啊。 " ɺͦ͏͸͍͔ͳ͍ɻ ( ，这样下去没法干。 繁體中文真的不一定需要強制避頭點……
 word-break: break-all;

Slide 48

Slide 48 text

段落對齊 避頭點 ' ，這樣下去不⾏啊。 " ɺͦ͏͸͍͔ͳ͍ɻ ( ，这样下去没法干。 繁體中文真的不一定需要強制避頭點……
 word-break: break-all;

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

段落對齊 Before After

Slide 51

Slide 51 text

段落對齊 Before After

Slide 52

Slide 52 text

字 字 ໌楷 ⿊黑仿 強調 我是標題

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

字 字 ໌楷 ⿊黑仿 強調 我是標題

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

標題設計 我是標題 這裡是個中標 4.4em 1.2em 1.6em 1.6em

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

字 字 ໌楷 ⿊黑仿 強調 我是標題

Slide 67

Slide 67 text

訣竅說完了！

Slide 68

Slide 68 text

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