Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

幾個中文排版訣竅,有效改善閱讀體驗

3,271 views

Published on

2016MOPCON@高雄

http://hackfoldr.org/mopcon2016/https%253A%252F%252Fhackmd.io%252FIYdgRgxgjAHFCcBaApmExEBYAmYaLACZ4A2RCCAVhBJNXiigDMg%253D%253Fboth

Published in: Design
  • Be the first to comment

幾個中文排版訣竅,有效改善閱讀體驗

  1. 1. 幾個中文排版訣竅 有效改善閱讀體驗 WANDERER 董福興
  2. 2. 為什麼要在乎排版?
  3. 3. 我們每天多數的時間 都在螢幕上閱讀文字
  4. 4. 已經十年了!
  5. 5. 做好排版: 小小改變, 大大加分!
  6. 6. 受到西方與東方影響 的中文排版
  7. 7. !" 桌上出版
  8. 8. # Web !" 桌上出版
  9. 9. 來自"的影響 • 避頭點規則:,。」』)等不得出現在行首; 「『(等不得出現在行末。 • 標點擠壓:遇到。」等狀況時,可以切割合併佔 一個全形位置。 • 標點懸吊(少見):,。等為避頭點可以懸掛到 版心之外,突出一字。
  10. 10. 來自#!的影響 • 超小字體:一堆模板內文字預設為8pt,甚至小到 7pt,難以閱讀。 • 段落間距:幾乎所有的瀏覽器都預設p的前後 margin為1em。 • 段首不縮:因為上面影響,所以在Web上幾乎很 少見到段首縮排二字(或一字)。
  11. 11. 中文排版需求 是什麼?
  12. 12. 制定規格 國際化工作小組 Internationalization WG = i18n WG 無障礙工作小組 Accessibility WG = a10y WG 規格檢查
  13. 13. 日文排版需求 Requirements for Japanese Text Layout 2008/4/11公佈 迄今持續修訂中
  14. 14. 中文排版需求 Requirements for Chinese Text Layout 2015/7/23公佈 銳意編輯中😓
  15. 15. BUT!
  16. 16. 文長,慎入 TL;DR
  17. 17. 講個訣竅!
  18. 18. 字字 楷 ⿊黑仿 強調 我是標題
  19. 19. 字級大小字字 • 問題:字體到底要多大才「易讀」?
  20. 20. 字級大小字字 Old Good Days 72pt = 1英吋 Classic Mac = 72dpi
  21. 21. 從鉛字的號數尋找線索……
  22. 22. 字級大小字字 字號 ⽤用途 點數 實際尺⼨寸 換算px
 (MBP) 五號字 內⽂文 (⼤大字) 10.5pt 0.369cm 16.5px 新五號 ⼀一般內⽂文 9pt 0.316cm 14px 六號字 註解圖說 8pt 0.281cm 12.5px
  23. 23. 字字 楷 ⿊黑仿 強調 我是標題
  24. 24. 字體配置楷 ⿊黑仿 • 桌上系統: • Windows:新細明體、微軟正黑體、標楷體。 • macOS:蘋方繁、宋體繁、楷體繁⋯⋯ • 行動裝置:
 蘋方繁、思源黑體(Not for all Android)😫
  25. 25. 字體配置楷 ⿊黑仿 字體 ⽤用途 優點 缺點 ⿊黑體 UI、標題、 強調、圖說。 視認性⾼高 字重多變 變化較少 明(宋)體 標題、內⽂。 較具「⽂氣」 字重差異不⼤ 楷體 標題、內⽂*、 摘⾔、注釋。 較為正式 視認性差 仿宋 內文**、摘言。 較為雋秀 視認性更差 * :台灣政府公文內文規定要使用楷體 **:中國黨政文書內文規定使用仿宋
  26. 26. 字體配置楷 ⿊黑仿 字體 ⽤用途 優點 缺點 ⿊黑體 UI、標題、 強調、圖說。 視認性⾼高 字重多變 變化較少 明(宋)體 標題、內⽂。 較具「⽂氣」 字重差異不⼤ 楷體 標題、內⽂*、 摘⾔、注釋。 較為正式 視認性差 仿宋 內文**、摘言。 較為雋秀 視認性更差 * :台灣政府公文內文規定要使用楷體 **:中國黨政文書內文規定使用仿宋
  27. 27. 字體配置楷 ⿊黑仿 字體 ⽤用途 優點 缺點 ⿊黑體 UI、標題、 強調、圖說。 視認性⾼高 字重多變 變化較少 明(宋)體 標題、內⽂。 較具「⽂氣」 字重差異不⼤ 楷體 標題、內⽂*、 摘⾔、注釋。 較為正式 視認性差 仿宋 內文**、摘言。 較為雋秀 視認性更差 * :台灣政府公文內文規定要使用楷體 **:中國黨政文書內文規定使用仿宋 Try Web font
  28. 28. 字體配置楷 ⿊黑仿 字體 ⽤用途 優點 缺點 ⿊黑體 UI、標題、 強調、圖說。 視認性⾼高 字重多變 變化較少 明(宋)體 標題、內⽂。 較具「⽂氣」 字重差異不⼤ 楷體 標題、內⽂*、 摘⾔、注釋。 較為正式 視認性差 仿宋 內文**、摘言。 較為雋秀 視認性更差 * :台灣政府公文內文規定要使用楷體 **:中國黨政文書內文規定使用仿宋 Try Web font @media only screen and (min-device-pixel-ratio: 2){}
  29. 29. 字體配置楷 ⿊黑仿 矽谷 ⽜⾓ 日文字型 小塚明朝 簡中字型 宋體簡
  30. 30. 字體配置楷 ⿊黑仿 矽谷 ⽜⾓ 日文字型 小塚明朝 簡中字型 宋體簡
  31. 31. 字體配置楷 ⿊黑仿 矽谷 ⽜⾓ 日文字型 小塚明朝 簡中字型 宋體簡
  32. 32. 字字 楷 ⿊黑仿 強調 我是標題
  33. 33. 強調文字強調 少用樣式強調 多用語意強調 <b> <i> <u> <em> <strong>
  34. 34. 強調文字強調 少用樣式強調 多用語意強調 <b> <i> <u> <em> <strong>
  35. 35. 強調文字強調 少用樣式強調 多用語意強調 <b> <i> <u> <em> <strong> &
  36. 36. 強調文字強調 沒有斜體 不用徬點 明體加粗 不夠明顯 有個  要說 有個重點要說 • • 有個重點要說
  37. 37. 強調文字強調 沒有斜體 不用徬點 明體加粗 不夠明顯 有個  要說 有個重點要說 • • 有個重點要說
  38. 38. 強調文字強調 沒有斜體 不用徬點 明體加粗 不夠明顯 有個  要說 有個重點要說 • • 有個重點要說
  39. 39. 強調文字強調 沒有斜體 不用徬點 明體加粗 不夠明顯 有個  要說 有個重點要說 • • 有個重點要說
  40. 40. 強調文字強調 改變字型 黑體加粗 加上底線 有個重點要說 有個重點要說 有個重點要說
  41. 41. 字字 楷 ⿊黑仿 強調 我是標題
  42. 42. 段落對齊 上個⽉月我到德國 (Deutscheland),到了了機 場,發現德⽂文寫作flughafen, 然後搭⾞車車到了了法蘭蘭克福中央⾞車車 站Frankfurt Hauptbahnhop。 買票花了了不少時間。 上 個 ⽉月 我 到 德 國 (Deutscheland),到了了機 場,發現德⽂文寫作flughafen, 然後搭⾞車車到了了法蘭蘭克福中央⾞車車 站Frankfurt Hauptbahnhop。 買票花了了不少時間。 text-align: justify; 問題1:避頭點 問題2:中西混排
  43. 43. 段落對齊 避頭點 ' ,這樣下去不⾏啊。 " 、そうはいかない。 ( ,这样下去没法干。 繁體中文真的不一定需要強制避頭點……
 word-break: break-all;
  44. 44. 段落對齊 避頭點 ' ,這樣下去不⾏啊。 " 、そうはいかない。 ( ,这样下去没法干。 繁體中文真的不一定需要強制避頭點……
 word-break: break-all;
  45. 45. 段落對齊 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;
  46. 46. 段落對齊 Before After
  47. 47. 段落對齊 Before After
  48. 48. 字字 楷 ⿊黑仿 強調 我是標題
  49. 49. 段落間隔 傳統活版段落間不空行
  50. 50. 段落間隔 但是幾乎所有的瀏覽器 都會加上段落間距 ⋯⋯然後大家都不reset一下的⋯⋯
  51. 51. 段落間隔 書籍排版加間距的狀況 • 序、跋、語錄:每一句話都有停頓,所以不完全 是前後連貫的敘述。 • 區分小節:章、節之外,敘述與語氣停頓處,加 一整行來做出區別。
  52. 52. 段落間隔 網頁可以怎麼做? • 電腦、平板:每一段之間還是加上間距,但間距 不要大於「字級+行距」(例如line-height: 1.8, margin就不要大於1.8em)。 • 手機:不妨不加間距,改用段首縮排來處理(例 如text-indent: 1em/2em;)。
  53. 53. 段落間隔 看到東西被⽕吞噬,焦⿊然後變形,有⼀種特別的快感。他⼿握銅製噴 嘴,⼿中這條巨蟒把毒液般的煤油噴向世間,⾎液衝上他的頭部,他的 雙⼿就好似某位令⼈讚歎的指揮家般,演奏著熾熱燃燒的交響樂,把⼀ 切燒成歷史的殘渣與焦炭。他那⼀臉淡定的頭上頂著編號四五⼀的招牌 頭盔,眼裡全是在想著接下來要燒些什麼的橘⾊⽕焰,然後把點⽕器撥 開,整棟房⼦霎時被⼀道狼吞虎嚥的⽕焰吞噬,把傍晚的天空照得⾚⿈ 帶⿊。他邁步⾛向⼀團⽕星,很想要像⽼笑話說的那樣,拿⽕鏟去撥棉 花糖,⽽那些振翅欲⾶的書本就這麼死在房⼦的⾨廊跟草坪上。旋迴的 ⽕光隨風吹拂,書⾴在燃燒中變得焦⿊。 蒙塔格露出了所有被⽕焰熾灼逼退的男⼈,必會擁有的勇猛獰笑。他知 道他回到消防隊後,會對鏡中那個貌似⽤燒焦軟⽊塞扮⿊臉,滑稽演員 般的⾃⼰眨眨眼。之後睡覺時,他覺得那抹灼熱的笑容,在⿊暗中依舊 掛在臉部肌⾁上。他的記憶中,那抹笑容從來不曾消退,⼀次也沒有過。 他把他那頂烏⿊的甲蟲⾊頭盔掛起來擦到發亮,把防⽕夾克掛得整整齊 齊的,舒舒服服地沖個澡,然後⼿插⼜袋吹著⼜哨穿過消防局的⼆樓, 直接從升降孔往下掉。直到似⼤禍臨頭的最後⼀刻,他才把⼿從⼜袋裡 抽出來,抓住⾦⾊升降桿,停⽌下落。他吱吱作響地慢慢滑停,腳後跟 離樓下的⽔泥地僅差⼀吋。 他⾛出消防局,沿著午夜的街道向地下鐵⾛去。安靜的氣動列⾞無聲地 順著地表下的管道滑⾏。他下⾞時呼出⼀⼤⼜暖空氣,凝在升往郊區貼 著乳⽩⾊瓷磚的電扶梯上。他吹著⼜哨,讓電扶梯載著他進入凝結的夜 靄中。他往轉角⾛去,腦中沒想些什麼特別的事。但⾛到轉角前,他的 腳步卻慢了下來,就好像無端吹來⼀陣風,又好像有⼈叫著他的名字似 的。 前後頁是兩段還是一段? 電子書排版照書排
  54. 54. 段落間隔 電子書排版照書排 看到東西被⽕吞噬,焦⿊然後變形,有⼀種特別的快感。他⼿握銅 製噴嘴,⼿中這條巨蟒把毒液般的煤油噴向世間,⾎液衝上他的頭部,他 的雙⼿就好似某位令⼈讚歎的指揮家般,演奏著熾熱燃燒的交響樂,把⼀ 切燒成歷史的殘渣與焦炭。他那⼀臉淡定的頭上頂著編號四五⼀的招牌頭 盔,眼裡全是在想著接下來要燒些什麼的橘⾊⽕焰,然後把點⽕器撥開, 整棟房⼦霎時被⼀道狼吞虎嚥的⽕焰吞噬,把傍晚的天空照得⾚⿈帶⿊。 他邁步⾛向⼀團⽕星,很想要像⽼笑話說的那樣,拿⽕鏟去撥棉花糖,⽽ 那些振翅欲⾶的書本就這麼死在房⼦的⾨廊跟草坪上。旋迴的⽕光隨風吹 拂,書⾴在燃燒中變得焦⿊。 蒙塔格露出了所有被⽕焰熾灼逼退的男⼈,必會擁有的勇猛獰笑。 他知道他回到消防隊後,會對鏡中那個貌似⽤燒焦軟⽊塞扮⿊臉,滑稽演 員般的⾃⼰眨眨眼。之後睡覺時,他覺得那抹灼熱的笑容,在⿊暗中依舊 掛在臉部肌⾁上。他的記憶中,那抹笑容從來不曾消退,⼀次也沒有過。 他把他那頂烏⿊的甲蟲⾊頭盔掛起來擦到發亮,把防⽕夾克掛得 整整齊齊的,舒舒服服地沖個澡,然後⼿插⼜袋吹著⼜哨穿過消防局的 ⼆樓,直接從升降孔往下掉。直到似⼤禍臨頭的最後⼀刻,他才把⼿從 ⼜袋裡抽出來,抓住⾦⾊升降桿,停⽌下落。他吱吱作響地慢慢滑停, 腳後跟離樓下的⽔泥地僅差⼀吋。 他⾛出消防局,沿著午夜的街道向地下鐵⾛去。安靜的氣動列⾞ 無聲地順著地表下的管道滑⾏。他下⾞時呼出⼀⼤⼜暖空氣,凝在升往 郊區貼著乳⽩⾊瓷磚的電扶梯上。他吹著⼜哨,讓電扶梯載著他進入凝 結的夜靄中。他往轉角⾛去,腦中沒想些什麼特別的事。但⾛到轉角前, 他的腳步卻慢了下來,就好像無端吹來⼀陣風,又好像有⼈叫著他的名 字似的。 這樣清楚多了
  55. 55. 字字 楷 ⿊黑仿 強調 我是標題
  56. 56. 標題設計 我是標題 • 問題:標題到底要佔多少空間?
  57. 57. 標題設計 我是標題 這裡是個中標 4.4em1.2em 1.6em 1.6em
  58. 58. 標題設計 我是標題 這裡是個中標
  59. 59. 看到東西被⽕吞噬,焦⿊然後變形,有 ⼀種特別的快感。他⼿握銅製噴嘴,⼿中這 條巨蟒把毒液般的煤油噴向世間。 ⾎液衝上他的頭部,他的雙⼿就好似某 位令⼈讚歎的指揮家般,演奏著熾熱燃燒的 ⽉ 標題設計 我是標題 焚書作為志業
  60. 60. 看到東西被⽕吞噬,焦⿊然後變形,有 ⼀種特別的快感。他⼿握銅製噴嘴,⼿中這 條巨蟒把毒液般的煤油噴向世間。 焚書作為一種志業 ⾎液衝上他的頭部,他的雙⼿就好似某 位令⼈讚歎的指揮家般,演奏著熾熱燃燒的 ⽉ 標題設計 我是標題 ←這樣的小標也不賴!
  61. 61. 標題設計 我是標題 • 目的:標題的目的在於讓讀者建構心 理定錨,知道閱讀進度與結構。一切 以易於理解為主,設計師切記!
  62. 62. 字字 楷 ⿊黑仿 強調 我是標題
  63. 63. 訣竅說完了!
  64. 64. 關於設計: 始於規則, 終於創意。

×