先講結論：好讀的文章，不是套上時髦字體的文章。它是打開的瞬間就知道在講什麼、中途分心也找得回來、把字放大也不會跑版、換成別的語言也讀起來自然的文章。 讀者不是來「破關」你的文章的，指路是文章該做的事。
先用3行總結：
- 內文以17到18px左右、行距1.7到1.9、行寬不要太長當作實務上的起點，會比較好上手。這不是萬用法則。
- 在WCAG 2.2（網頁無障礙的國際標準）裡，重點是不要破壞對比度、200%文字放大、320 CSS px的重排（版面隨螢幕寬度重新排列）、文字間距覆寫和鍵盤操作。[R1-R8]
- 12種語言不是把同一份CSS複製貼上12次，而是「共通的無障礙基礎＋依文字系統做調整」。[R10-R13]
1. 易讀性不是靠感覺，而是三層設計
易讀性至少有三層：看得到字、跟得上文章、操作得了頁面。 就算字有18px，文章若是一面密不透風的牆，還是很累。文章再簡單，按鈕太小一樣很累。所以「只改字體大小就完工」，就像只把門牌擦得亮晶晶，卻把樓梯拆掉了。
2. 讀者不會一開始就全部讀完，所以要設計成4個層次
在網路上，跳著瀏覽很正常。所以讓文章能用四個層次來讀：5秒＝標題和開頭，30秒＝H2標題和粗體字，3分鐘＝重點整理，深入＝全文。 這不是叫你只能寫短文，而是說長文也要多設幾個中途站。
光看H2就能把故事串起來、每一節開頭有個小結論、用表格和項目符號就能抓到比較重點，這樣「從頭讀到尾的人」和「只想要答案的人」就能在同一頁共存。
3. 內文字體大小，從17到18px左右開始
網頁內文沒有絕對的最佳值。不過字太小會降低辨識度，在使用真實網頁的視線研究中，字體變大也與注視時間縮短有關。[R14] 實務上以內文17到18px為起點，並用rem這類容易放大的單位來設計，會比較好處理。
重點是，「設成18px就等於無障礙」並不成立。WCAG 2.2 AA的「調整文字大小」要求放大到200%，內容和功能都不能消失。[R3] 如果讀者一放大，選單就不見了，那個18px的漂亮首屏就只是張紀念照。
4. 行距、段落間距、行寬，是在減少「文字的交通流量」
內文行距以1.7到1.9左右為起點，比較容易替長篇網路文章留出餘裕。段落之間也要有明顯的空白。基本上一段講一個主題，避免完全不換行的巨大文字塊。[R9]
對於拉丁字母的文字，有研究顯示每行55個字元左右的中等行長有效，實務上以55到70個字元為起點比較順手。[R15] WCAG AAA的「視覺呈現」準則提到每行80個字元以下，CJK（中日韓文字）則是40字以下。[R8] 這裡也一樣，「55」不是宇宙真理，要依螢幕、語言和字體大小調整。
左右對齊的內文，字詞之間的空白容易忽大忽小。尤其在網頁上，基本上靠左對齊就夠了。[R8]
5. 字體不是魔法棒，用正常好讀又載入快的就好
襯線體和無襯線體，沒有萬能的贏家。在對照實驗中，閱讀速度沒有出現明顯的襯線效應。[R16] 而且2026年的統合分析也沒有確認，OpenDyslexic這類「閱讀障礙專用字體」能比標準字體穩定提升閱讀表現。[R17]
也就是說，顧及身心障礙者，並不等於強制使用特殊字體。足夠的大小、留白、自然的字形、完整的字元收錄，以及使用者可以放大，才是基礎。內文優先採用裝置的系統字體，或各語言常見的一般字體，就不必載入龐大的網頁字體。
6. 背景色與對比度：淺灰色文字的「時尚稅」很貴
WCAG 2.2 AA的對比度標準是：一般文字4.5:1，大字3:1以上。[R2] 沒必要因為「感覺很高級」就在白底上放淺灰色字，給讀者的眼睛加上減益效果。
有多項研究顯示，淺色背景配深色文字（正極性顯示）在校對和辨識小字時比較有利。[R18] 因此對一般讀者來說，預設用淺色主題比較穩當。不過也有人喜歡深色模式，所以要保留這個選項。至於「米白一定比純白更護眼」，目前沒有強到足以斷言的證據。
7. H1、H2、H3不是裝飾，而是文章的路標
H1是頁面的主題，H2是大論點，H3是其中的細項。不要只把字加粗假裝是標題，要用HTML的標題結構賦予它意義。螢幕閱讀器的使用者靠標題在頁面內移動，所以標題既是視覺設計，也是導覽。[R7][R9]
好用的測試很簡單：只把H2抽出來，還看得懂文章的脈絡嗎？ 如果看不懂，標題很可能就是「第二章」「接續」「更多詳情」這種製造迷路的標題。
8. 粗體、項目符號、表格、結論框，都當作「資訊標誌」來用
粗體用在重要詞彙，項目符號用在並列資訊，表格用在比較，結論框則是判斷的落腳處。每一種都賦予一個角色。全文都加粗，就像同時點亮100盞警示燈，結果哪一盞都不顯眼。
連結不要只靠顏色區分，要再加上底線等其他線索。重要資訊也不要只停在「因為是紅色所以危險」，還要用文字或圖示表達意思。
9. 以「多巴胺上頭」模式為前提，但不要相信人類注意力只有8秒的說法
這裡說的「多巴胺上頭」不是醫學用語。它是把現代網路的渙散狀態玩梗：通知→短影音→另一個分頁→回來→「我剛讀到哪？」 這不是用來把整個世代或身心障礙者一概罵進去的詞。
對策不是把整篇文章變成短影音，而是短段落、具體的標題、每節一個小結論、必要時附上目錄，並寫出能讓人回來後重新接上脈絡的專有名詞。自動播放、不相關的輪播，以及讀到一半占滿畫面的彈出視窗，等於朝讀者的專注力丟椅子，所以要減少。[R9]
10. 身心障礙的無障礙不是「特別模式」，而是標準配備
基礎是以WCAG 2.2 AA為目標。具體包括：200%文字放大、相當於320 CSS px時不必左右捲動的重排、4.5:1對比度、24×24 CSS px以上的指標目標或足夠的間距、鍵盤操作、看得見的焦點，以及跳過重複區塊的機制等。[R1-R7]
文字間距準則中的「行距1.5、段後間距2、字距0.12em、詞距0.16em」，並不是要你把初始CSS設成這些值。 AA的要求是：使用者即使把間距覆寫成這些值，文字也不會重疊、消失，功能也不會壞掉。[R5]
實務上，把主要按鈕做到44px左右會比較好按，不過WCAG 2.2 AA的最低標準本身是含例外條件的24×24 CSS px。[R6]
11. 12種語言共用同一套設計系統，但不強加同一種排版
要共通的是對比度、標題階層、放大、重排、留白、可操作性、無障礙名稱等基礎。依語言而變的，是字體、斷行、斷字連字號、標點和行高這類取決於文字系統的部分。[R10-R13]
lang屬性也很重要。不要擅自把zh-Hans、zh-Hant、pt-BR這類資訊簡化成zh或pt。它是瀏覽器、語音朗讀、斷字處理和字體選擇的線索。
12. 各語言的實務起始值
| 群組 | 起始值的思考方式 |
|---|---|
| 日文 | 從17到18px、行距1.8左右、每行約30到40字開始。不要強制加寬不必要的字距。尊重日文排版。[R10] |
| 簡體、繁體中文 | 分開使用CJK字體，不要破壞禁則處理和標點。分離zh-Hans與zh-Hant。[R11] |
| 韓文 | 使用韓文字體，不要加入不自然的字距。確認韓文的斷行方式。[R12] |
| 泰文 | 不要破壞正確的字形組合與詞界斷行。行高稍微寬一點比較安全。不要隨便使用word-break: break-all。[R13] |
| 越南文 | 使用完整收錄變音符號的字體，並避免用固定高度切掉字的上下部分。 |
| en/es/pt-BR/id/fr/de | 以每行約55到70個字元為起點，並考慮正確的lang與hyphens:auto。檢查德文的長複合詞等是否造成溢出。 |
13. 在手機上，不只要「讀得了」，還要「馬上出現」
如果為12種語言全都堆上龐大的網頁字體，文字還沒出現讀者就走了。web.dev說明，網頁字體會拖慢FCP/LCP（首屏與主要內容出現的速度），而字體替換可能造成CLS（版面位移）。[R19] 穩當的做法是內文優先用系統字體，品牌字體只用在必要之處。
Core Web Vitals目前的良好目標，是在第75百分位數達到LCP 2.5秒以內、INP 200ms以內、CLS 0.1以下。[R20] 讀到一半，因為廣告或字體讓段落「咚」地掉到下面的網站，在談內容之前，就像「用手指壓著書，店員卻把桌子移走了」。
14. 會被持續閱讀的文章，每次都在同樣的地方放同樣的東西
提升回訪的基礎，比起華麗的演出，更重要的是可預測性。標題的樣子、連結的樣子、目錄、文章寬度、語言切換、搜尋結果、相關文章的位置，如果每次幾乎都一樣，讀者就能學會怎麼操作。
如果要提供調整文字大小、行距、主題的「Aa」設定，把使用者的選擇保存下來也不錯。無障礙不是每次都請人「請開啟障礙者模式」，而是從初始狀態就不容易壞，只有需要的人才去調整，這樣比較好用。
15. 千萬別做的「讀者耐力測驗」
要避免的代表例子有：12px級的內文、淺灰色、超過100字的長行、左右對齊、塞滿一整個畫面的段落、跳級的標題階層、全部粗體、只靠顏色傳達意思的介面、自動播放、難以關閉的彈出視窗、把內文做成圖片、一放大就橫向捲動地獄、龐大的網頁字體，以及沒有意義的動畫。
讀者不是來參加「有沒有智力和動態視力把這個網站讀完」的考試的。
16. 猶豫時就從這些基準值開始
| 項目 | 實務起始值 | 備註 |
|---|---|---|
| 內文 | 17到18px | 不是絕對值。要能放大 |
| 內文行距 | 1.7到1.9 | 依語言與字體調整 |
| 拉丁字母每行 | 約55到70個字元 | 研究與實務的起點。避免過長[R15] |
| CJK每行 | 約30到40字 | 40也對應WCAG AAA視覺呈現的標準[R8] |
| H1 | 約32到40px | 與內文的差距要明確 |
| H2 | 約25到30px | 光看H2也能理解脈絡 |
| H3 | 約21到24px | 與H2保持差異 |
| 一般文字對比度 | 4.5:1以上 | WCAG 2.2 AA[R2] |
| 大字 | 3:1以上 | WCAG 2.2 AA[R2] |
| 指標目標 | 以24×24 CSS px以上為基準 | 有例外。實務上也可考慮44px左右[R6] |
| 文字放大 | 200% | 不失去內容與功能[R3] |
| 重排 | 320 CSS px | 原則上不需要雙向捲動[R4] |
17. 建立品質關卡。「我會小心」不是品質保證
如果是文章工廠或CMS（內容管理系統），不要把易讀性只交給人的記憶。用靜態檢查來看lang、H1、標題順序、圖片alt、無障礙名稱和禁用的CSS，再用真實瀏覽器檢查320px、200%放大、文字間距覆寫、鍵盤、焦點和橫向捲動。
能安全修正的可以自動修正，例如缺少的lang或套用共通CSS。但是文章的意思、翻譯、alt的內容這類會改變意思的修正，不可以擅自編造。 修不了就標示為FAIL，交給人處理。品質關卡不是「生氣的老師」，而是「不讓壞掉的商品出貨的閘門」。
18. 總結：好文章不會考驗讀者
好讀文章的本質，不是把字放得巨大，也不是把留白弄得時髦。知道該讀哪裡、中途能回來、能放大、點得到、能被朗讀、每種語言都自然，而且很快。 把這些全部放進同一套設計系統裡。
對一般成人來說很自然，對容易分心的人、視力弱的人、閱讀困難的人，以及使用鍵盤或輔助科技的人，也不容易壞掉。這才是最強的。與其另外在別的房間做一個「無障礙版」，不如從一開始就把玄關做寬。
