朋友分享了一篇網路文章,題材我有興趣,但讀來帶有痛苦感,像是馬拉松最後階段,得靠意志力才能撐下去不棄賽,但我明明是在讀第一段呀。

做了民調,原來不只我有這種感覺。嚴格來說,文章用字還算淺白通順,到底什麼原因讓它散發著「別讀了,快放棄吧,這些文字不是你能駕御的」的暗示?


(以上非原文章,是用廢文產生器模擬排版效果)

用 F12 工具試調了 font-size (13px -> 14.66px)、line-height (1.4 -> 1.8 倍)、color (#666666 -> black):

純黑字、字放大,每行字數變少 (由 44 降到 36 (12pt) / 39 (11pt)),可讀性變高不少,至少對我是如此。

以上是自己盲試的結果,好奇在中文排版上有沒有像文字顏色對比 WCAG 標準一樣的科學化建議可遵守?

還真的有,W3C 有份Requirements for Chinese Text Layout 中文排版需求,洋洋灑灑鉅細靡遺,連避孤行、避孤字、示亡號都討論到了。懶人如我,只想知道建議的行高(line-height)、字型大小(font-size),很不幸標準沒提。

爬文找到一些參考:

  1. 大眾字型學|怎麼製作美觀的文件版面? by justfont

要計算垂直韻律,必須先決定內文的基本字型大小。就中文來說,台灣約定俗成的印刷內文大小為 12 pt,而 1.5 倍行距也被認為是理想的設定。在這種設定下,這份文件的基本行高就是 12 X 1.5,也就是說,每一行都是 18 pt 高。

  1. 簡單做好中文排版:十項讓長文章更容易閱讀的原則 by BFA 簡報

不只是行距,字級也是個問題。但我沒辦法告訴你字級要多大才正確,畢竟現在螢幕尺寸與DPI差距頗大,但絕對不能以排英文的方式來排中文。活版時代,內文常用的字級有兩種,一種是五號字,就是10.5pt(3.7mm),另一種是新五號,就是9pt(3.18mm)。7內文字盡量不要小於9pt。這裏請以適當的大小自行計算,畢竟螢幕與書籍是不同的。

但是行距有著正確的數字,一般而言中文行距介於1.5到2em之間,通常只要指定:

p {line-height: 1.7em;}

就能得到適當的行距。

  1. CSS 教學 – 基本文字設定 : font-size 與 line-height by 飛肯課程

當沒有特別指定時,line-height (行高)在瀏覽器的原始預設值為 1.0 ~ 1.2 倍,但如果想要讓瀏覽者在閱讀文字上面感到更舒適的話,會建議大家至少要設定為 1.5 倍以上,通常比較多人會設定在 1.5 ~ 1.8 倍之間。

舉例來說,飛肯的官網網頁,文字設定的行高就大多是使用 1.6 倍,既方便同學輕鬆閱讀,又能清楚獲取最新的開課資訊。

  1. 網站設計的最佳字體大小指南 by 瑞布科技

對於字體大小沒有確切的規則,但是在設計電腦網頁時需要考慮一些良好的做法:

  • 正文 – 字體大小應在 16 px 到 18 px 之間以確保易讀性(或使用我們上面提到的大小規則為 1.6 rem 到 1.8 rem)。如果您可以承受更大的尺寸,那麼即使是 21 px 也可以令人愉悅地閱讀。

【結論】

原本想看看有沒有官方標準,無功而返。歸納上述建議,行高 1.5 應該是下限,原排版的 1.4 偏低了。至於字型,有 10.5pt、12pt、16px 幾種說法。取 10.5pt 字級、1.7em 行高效果如下,我個人覺得字偏小,但已比原本的排版好讀許多。由此,本回合唯一的共識為「中文內文 line-height 請 1.5 起跳」。

This article briefly explores recommendations for font-size and line-height in Chinese typography on web pages.


Comments

# by 路人甲

有興趣的話,可以參考一下數位排版的巨著 "The TeXbook" <https://theswissbay.ch/pdf/Gentoomen%20Library/Extra/D._Knuth-The_TeXbook.pdf>,然後搜尋一下 magic number "1.2"。

# by 伊果

現在已經習慣使用『簡悅』這類瀏覽器擴充套件,直接把排版替換成更順眼的閱讀模式了。大大也可以嘗試看看

Post a comment