行寬字級可讀性:公式、情境數字與國際標準一次看

螢幕上滿滿一片文字,行距擠得像沒留縫,視線讀到一半換行,得往回找一下自己剛剛停在哪個字才能接著讀。換到手機畫面,問題常常反過來,字級小到得瞇眼,甚至兩指往外一撐把畫面放大,才看得清楚標點跟數字。這兩種閱讀障礙,追根究柢都指向同一組常被忽略的參數。

行寬字級可讀性談的就是這組參數該怎麼配,行寬該留多少、字級該抓多大,兩者搭在一起才不會讓讀者一路對抗版面。多數人調版面靠感覺,調到「看起來還可以」就停手,但這組數字其實有明確的計算邏輯與國際規範可以依循:中文內文一行抓 35~45 字上下,桌機字級不低於 16px,手機不必跟著縮小,簡報字級另有下限。把這幾個數字定準,讀者的視線就不必在版面上多繞一圈路。

這篇會先拆行寬跟字級為什麼會互相牽動,再教你用一條簡單公式回推容器該留多寬,最後把這套邏輯套進不同情境,從網頁文章、手機畫面到電子書、簡報,各自抓出可以直接套用的數字。先從行寬跟字級這兩個參數的關係講起。

行寬與字級,一組互相牽動的指標

行寬(line length)指的是一行文字佔的版面長度,有兩種算法:一種用「字元數」計,看一行放進幾個字;另一種用「物理寬度」計,量一行文字在螢幕或紙上實際佔幾個像素或公分。字級(font size)則是文字本身的大小,螢幕排版通常用 px(像素)計,印刷品或簡報則習慣用 pt(點數)。

這兩個參數不是各自獨立的旋鈕。字級一放大,同一個物理寬度裡塞得下的字元數就變少,行寬如果沒跟著加寬,每行的字數會被動縮水;行寬如果維持不變,讀者要嘛接受一行字變少,要嘛版面看起來更擁擠。這也是為什麼不少版面調了字級卻沒調行寬,或者反過來只加寬容器卻沒調整字級,讀起來就是哪裡怪,卻說不出所以然。問題往往不在單一個數字,而在兩者沒有一起調整。

同一個 640px 容器下,字級從 16px 放大到 32px,每行字數就從 40 字減為 20 字,說明行寬與字級必須一起調整
容器寬度固定時,字級一放大,同一行就裝不下那麼多字,行寬與字級得同步調整才不會失衡。

行寬字級怎麼算?先定每行字數,再回推寬度

行寬字級要怎麼抓,與其兩個數字各自瞎猜,不如換個順序,先決定「理想每行字數」,再用字級回推容器該留多寬。中文內文的理想每行字數,可以抓在 35~45 字之間,這個範圍是怎麼算出來的,後面會拆原因。這裡的關鍵是一條簡單公式,容器寬度大約等於字級乘以每行字數

中文全形字接近正方形,一個字大約就占滿一個字身(1em)寬度,所以字級乘以字數能抓出相當接近實際的估計值。舉個例子,字級設 16px、想要一行放 40 字,容器寬度大概落在 640px 左右,不含左右留白;想把每行縮成 35 字,同樣字級下容器就該窄一點,想放寬到 45 字,容器也要跟著加寬。

用容器寬度約等於字級乘每行字數回推:16px 字級下,每行 35/40/45 字分別對應 560/640/720px 容器寬度
先定每行字數,再乘上字級,就能回推容器該留多寬,例如 16px 想放 40 字約需 640px。

要提醒的是,這條公式抓的是大方向,不是精算結果。實際排版還要扣掉標點符號、字距、左右留白等變因,真正上線前最好用瀏覽器實際測一次換行狀況。但作為抓初始數字的起點,這條公式已經夠用,不必每次改版都憑感覺重調。

中文全形字和西文字母,算法有什麼差異?

這條公式為什麼只在中文行得通,換成英文網頁卻常看到「一行 50~75 個字元」這種數字?差別在字體本身的度量方式。中文字是全形方塊字,不管筆畫多寡,每個字幾乎都占滿一個字身,寬度統一、好估算。西文字母是比例字體(proportional font),每個字母寬度不一,i 窄、m 寬,一段文字裡窄字母跟寬字母混在一起,平均下來一個西文字元大概只占中文字身的一半左右。

Baymard Institute 針對西文網頁內文的可讀性研究指出,每行 50~60 個字元最理想,到 75 個字元都還算舒適;字體排版學者 Robert Bringhurst 在經典著作《The Elements of Typographic Style》裡,也把西文內文的理想行長訂在 66 個字元,45~75 字元之間都算令人滿意的範圍。這些數字換算到中文該怎麼折算,W3C 的網頁無障礙規範(WCAG)2.1 有明文標準,直接把中日韓文字的行寬上限訂在一般西文的一半,也就是 40 字元封頂。這也是為什麼中文內文的理想每行字數,自然落在西文一半左右的區間,也就是前面提到的 35~45 字,不是中文比較難讀,是計算單位原本就不一樣,直接把西文的字元數套用到中文只會抓錯數字。

中文全形方塊字寬度一致、一行約 40 字,西文比例字母寬窄不一、一行約 66 字元,WCAG 把中日韓行寬上限訂為西文的一半
中文用「字」算、西文用「字元」算,同寬容器裝的數量差一倍,這也是中文抓 35~45 字的由來。(資料來源:W3C WCAG 2.1、Baymard、Bringhurst)

這個全形字身的概念,在 W3C 制定的《中文排版需求》(clreq)文件裡也有正式定義,把中文字的方塊字身當成排版度量的基本單位。這也是為什麼中文網頁排版習慣用「字」而不是「字元寬度」來描述行寬,跟西文排版慣用的字元計數本來就是兩套邏輯。

行寬、字級、字元數,別再搞混這三個指標

字級、字元數(每行字數)、行寬,這三個詞經常被交替使用,但指的其實是三件不同的事。字級是文字本身多大,例如 16px;字元數是一行放幾個字,例如 40 字;行寬則是版面上一行實際佔的物理寬度,例如 640px。三者是連動關係,不是三個可以各自隨便轉的旋鈕,只調字級卻不動容器寬度,每行字數會被動跟著變;只設定一行要放幾個字卻不管字級,實際的物理行寬也會隨字級縮放。

真正該決定的核心指標是字元數,也就是每行字數。字級與行寬都只是圍繞這個核心指標反推出來的結果,先定好中文一行落在 35~45 字這個目標,字級跟著使用情境挑一個舒適值,行寬容器再用前面那條公式回推。順序一旦顛倒,先隨手訂一個容器寬度,再看字級要多大才好看,最後多半會落到某個尷尬的每行字數,讀起來不上不下。

網頁文章、手機、電子書、簡報,行寬字級各抓多少?

前面把行寬跟字級怎麼算的邏輯講完了,接下來把「每行 35~45 字」這個基準值,套進四種常見情境各自的字級範圍與行寬做法。網頁文章、手機畫面、電子書、簡報投影片,每一種的答案都不一樣,不是套同一組數字就能用。

網頁 16 到 18px、手機不縮小至少 12px、電子書用相對字級、簡報內文 18pt 起,四種情境的行寬字級建議各不相同
四種情境各有建議值:網頁與手機守住字級下限、電子書交給讀者調、簡報改用短句,共同基準是先定每行 35~45 字。

桌機瀏覽的網頁文章,行寬字級怎麼定?

桌機瀏覽的網頁內文,字級建議落在 16~18px 之間,放大到 21px 左右都還算舒適區間,這個基準值參考 Google 的 Material Design 3 設計規範,它把常規內文字級(Body Large)定在 16sp,換算大約就是 16px。

容器寬度不建議直接寫死 px,改用 CSS 的 em 為單位比較穩,把目標每行字數直接當 em 的倍數寫進去,例如想要一行 40 個中文字,就設定 max-width: 40em,這樣換字級的時候,每行字數會跟著自動維持在 40 字上下,不用每次改版重新手算 px。Baymard Institute 針對行寬可讀性的研究,也建議用 chem 這類相對單位設定容器寬度,而不是憑感覺塞一個固定像素值。

手機螢幕字級不必跟著縮小

手機螢幕小,不少人直覺覺得字級也該跟著縮小,這其實是個常見誤解。手機螢幕雖然小,但使用者拿著手機看的距離也跟著變近,實際落進視野裡的字體大小感,跟坐在桌機前看螢幕其實相差不大。Google 的 Chrome 開發者文件裡,Lighthouse 的字級檢測項目把 12px 訂為底線,低於這個門檻的文字會被判定為行動裝置難以閱讀,頁面要有 60% 以上的內文字級達標才算通過。Apple 的人機介面指南也是同樣邏輯,iOS 系統即便使用者把動態字級調到最小,本文字級仍設有 11pt 的下限,預設的本文字級則落在 17pt,兩邊都沒有因為螢幕小就把字級門檻壓得更低。

真正該跟著調整的是行寬,不是字級。螢幕變窄,每行能放的字數自然會跟著變少,這也是響應式排版原本就該做的事,但字級這個變數不必動。把字級跟行寬這兩件事分開處理,才不會為了畫面塞得下,犧牲掉可讀性。

電子書該用相對字級,不是固定點數

電子書像 EPUB、Kindle 格式,跟網頁、簡報最大的不同,在於讀者本來就可以自行調整字級大小,這本來就是電子書閱讀器的核心設計之一。因此排版時不該把字級寫死成某個固定點數,而是用相對單位(例如 1em)讓讀者的個人設定生效。Amazon Kindle Direct Publishing 的官方格式規範就明文要求,本文字級須使用預設的相對值,不得用固定 px 或 pt 寫死,原因很直接,寫死字級會蓋掉讀者原本的閱讀設定,等於強迫每個人都用同一個字級看書。

製作端真正該把關的,不是電子書字級該設幾點這種假問題,而是行距與段落間距這些該跟著字級一起等比例縮放的規則。行距至少要有 1.5 倍以上,段落間距要比行距再大 1.5 倍,這是 W3C 網頁內容無障礙指引(WCAG)對文字排版訂出的門檻,雖然原本是為網頁而寫,拿來當電子書段落設計的參考基準一樣成立。搭配相對字級一起用,不管讀者把字級調到多大,行距段距都還能維持舒服的比例。

簡報投影片的字級下限

簡報跟前面三種情境不一樣,重點不是一行放多少字,而是字級小到什麼程度,後排的人會看不到。微軟官方的無障礙簡報指南明文建議,內文字級不要低於 18pt;標題再放大一級,訂在 24pt 以上是業界常見的搭配做法,好讓坐在教室或會議室後排的人也看得清楚。

但這裡有個更根本的提醒,簡報本來就不該把網頁段落整段貼進去,再想辦法把字級縮小塞進投影片裡。簡報的排版邏輯本來就該是短句、關鍵詞取代整段文字,所以前面每行 35~45 字那條公式,不適用在簡報投影片上。簡報要顧的是字級夠不夠大、資訊夠不夠精簡,不是行寬抓得準不準。

國際標準怎麼定行寬字級的級距?

把前面各情境提到的數字攤開來看,會發現不同標準各自把關的重點不太一樣。無障礙規範管的是行寬與間距上限,設計系統管的是字級的基準值,作業系統與辦公室軟體則各自訂出自己平台的門檻。整理成一張對照表,可以照專案的嚴謹程度挑對應的級距來用,不必死記一組數字。

標準/場景行寬(字元數)字級門檻
W3C WCAG 2.1(SC 1.4.8)西文 80 字元以內,中日韓文 40 字元以內未直接規範字級,但要求行距達 1.5 倍以上
Google Material Design 3未直接規範字元數內文(Body Large)16sp,約合 16px
Apple 人機介面指南(iOS)未直接規範字元數最小 11pt,預設本文 17pt
微軟 PowerPoint 無障礙指南不適用(簡報以短句為主)內文 18pt 以上,標題建議 24pt 以上
Bringhurst《The Elements of Typographic Style》西文 45~75 字元(理想 66 字元)未涉及字級,僅談行長

一般網站抓 Material Design 或前面提到的 16~18px 起跳就夠;需要符合無障礙規範的網站,行寬與間距要對齊 WCAG 的門檻;企業簡報照微軟的 18pt、24pt 走;電子書則交給讀者自己的字級設定,製作端顧好相對單位跟間距比例即可。

沒有一組數字能套用所有情境,但只要抓住一個決策順序,就不用再靠感覺調字級調到整篇版面失衡。先定每行字數,中文以 35~45 字為基準;字級再依情境挑,桌機與手機 16px 以上、簡報 18pt 以上、電子書交給讀者自己調;行寬則是最後用公式回推出來的結果,不是一開始就該手動硬調的參數。下次遇到版面看起來哪裡怪,卻說不出原因,先回頭檢查這三個數字有沒有對上,答案通常就在裡面。

資料來源
  1. Readability: The Optimal Line Length — Baymard Institute
  2. The Elements of Typographic Style — Robert Bringhurst
  3. Understanding Success Criterion 1.4.8: Visual Presentation(WCAG 2.1) — W3C WCAG 2.1
  4. Requirements for Chinese Text Layout(中文排版需求,clreq) — W3C
  5. Typography – Type scale tokens(Material Design 3) — Google Material Design 3
  6. Document uses legible font sizes(Lighthouse|Chrome for Developers) — Chrome Developers
  7. Typography(Human Interface Guidelines) — Apple 人機介面指南
  8. Text Guidelines - Reflowable(Kindle Direct Publishing) — Amazon Kindle Direct Publishing
  9. Make your PowerPoint presentations accessible to people with disabilities — 微軟 PowerPoint 無障礙指南