網頁排版與可讀性 - 字型大小與行高

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

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

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

用 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 高。

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

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

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

p {line-height: 1.7em;}

就能得到適當的行距。

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

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

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

4. 網站設計的最佳字體大小指南 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.