跳出率忽然往上衝一大截、平均停留時間也掉到只剩幾十秒，這是不少網站經營者某天打開後台報表，會撞見的景象。第一時間查的通常是網速，確認伺服器沒問題、圖片也都壓縮過了；查不出問題，又開始懷疑是文案寫得不夠吸引人，把整段文字改了又改。而真正卡住訪客的原因，其實往往比這些都更基本，他們根本讀不下去眼前這段文字。
這正是網站字體易讀性容易被忽略的地方，它跟「畫面好不好看」是兩件完全不同的事。字體選得再有質感、配色再講究，只要字級太小、行距太擠、一個頁面塞了三、四種字體，訪客的眼睛還是會很快喊累，滑沒兩下就按上一頁。而且這件事有明確的門檻可以對照，字級、行距、對比度，國際上都有具體的數字標準，不是憑感覺判斷「看起來夠大了吧」。
接下來會把這些門檻一項一項攤開，不用先懂設計，打開瀏覽器內建的工具就能自己核對，抓到一項算一項。先從「好讀」跟「好看」為什麼是兩件事講起，再一路拆到手機版該怎麼調整。
「好讀」和「好看」，為什麼是兩回事？
多數人挑選網站字體時，想的是這個字體有沒有品牌調性、配色搭不搭，很少有人會停下來問訪客讀起來吃不吃力。這兩件事聽起來很像，實際上分屬完全不同的維度。好不好看是主觀品味，一百個人可能有一百種喜好；好不好讀卻有客觀、可以量測的標準，字級多大、行距多寬、對比夠不夠，都能用數字驗證，不需要爭論美感。這正是網站字體易讀性真正要處理的範圍。
UXPin 的一篇分析指出，排版可讀性不佳會直接墊高跳出率、降低停留時間，也讓讀者跟內容的互動變少；Google 官方的開發文件 web.dev 也提到，字型大小、間距、對齊方式這些細節，對不同讀者造成的閱讀難度差異很大，有人幾秒鐘就能抓到重點，有人卻得瞇著眼睛逐字辨認。這正好呼應開頭那種跳出率異常升高、停留時間偏短的狀況，問題往往不是內容寫得不好，是訪客根本沒能舒服地把內容讀完。
可讀性差最先流失的是讀者的耐心，不是興趣。內容其實寫得不錯，卻因為讀起來吃力，訪客撐不過前面幾秒就放棄，這也是為什麼流量報表最容易把它誤會成內容不夠吸引人。接下來幾個判準，任何人都能自己核對，不需要懂設計。
字體出了問題，你要從哪裡開始檢查？
要抓出字體哪裡出了問題，不需要具備設計背景，也不用安裝任何付費工具。多數瀏覽器本身就有開發人員工具，在網頁上按右鍵選「檢查」，或直接按下鍵盤上的 F12，就能叫出目前這個頁面實際套用的所有 CSS 樣式，包括字級（font-size）、行距（line-height）、字體名稱（font-family）這些數值，一目瞭然。就算不打開開發人員工具，單純用肉眼觀察畫面，也能抓出不少明顯的問題，像是一眼就看得出字擠成一團，或是背景色跟文字色幾乎糊在一起。
下面把最常出問題的六個地方拆開來講：字級夠不夠大、行距夠不夠鬆、一個頁面塞了幾種字體、一行塞了多少字、文字跟背景的對比夠不夠明顯，以及對齊方式選得對不對。這幾項可以任意順序核對，不必照順序全部做完才算數，抓到一項就先修一項。
字級是不是低於安全值？
正文字級被調得太小，是排版最常見的問題之一，尤其在追求版面精緻、想塞進更多內容時特別容易發生，設計者往往把字級一路往下調，調到自己在大螢幕上還讀得清楚為止，卻沒想過中年以上族群、或是拿著手機瞇眼看螢幕的訪客，對過小的字級完全沒有耐性，讀沒兩行就放棄。
美國聯邦政府官方設計系統 U.S. Web Design System 明訂，正文（不含標題與註解）至少要使用相當於 16px 的有效字級；國際網站建置平台 Wix 也建議，基礎字體大小通常要落在 16px 以上，讀者才不需要額外費力就能看清楚。這兩個數字剛好互相印證，16px 可以當成正文字級的安全下限。
要核對自己的網站有沒有踩到這條線，打開開發人員工具，點選任一段正文，在樣式面板裡找到 font-size 這一項，看它顯示的實際數值是多少。這裡要特別提醒，「看起來夠大」跟「量出來的實際像素值」常常有落差，同一個字級，配上不同字體、不同螢幕解析度，視覺上的大小觀感差很多，光憑肉眼判斷容易失準，一定要用工具量出真正的數字，才知道有沒有低於安全值。
行距不到 1.5 倍，文字容易黏在一起
行距（line-height）太窄是第二常見的問題，行與行之間沒留足夠的呼吸空間，眼睛讀完一行，很難準確抓到下一行該從哪裡接續，讀起來會有整段文字黏成一團的感覺。
W3C 的網頁內容無障礙指南（WCAG）第 1.4.8 條「視覺呈現」明訂，段落內的行距至少要達到「一倍半」，也就是字級的 1.5 倍；Wix 同樣建議，多數字體適合的行距起點是字級的 1.5 倍。這兩個標準指向同一個數字，可以當成行距的底線。不過中文因為筆畫比英文密集、又是方塊字，行距其實可以比這個國際下限再放寬一些，讀起來會更舒服，不必卡在剛好 1.5 倍。
同樣打開開發人員工具，找到正文所在的元素，在樣式面板裡看 line-height 這一項的實際數值，拿它去除以 font-size，算出來的倍數如果不到 1.5，這一段文字大概就是黏在一起、難以閱讀的元凶。
一個頁面塞了幾種字體？
字體種類太多，是另一個常被忽略的問題。標題用一種字體、正文又用另一種、按鈕上的文字再指定第三種，有時候還會為了強調某個區塊額外加一兩款裝飾字體，整頁看下來風格七拼八湊，一點都不統一。
Wix 建議，一個網站使用的字體家族最好控制在一到三種之間，對多數網站來說，兩種字體就已經很夠用，一種給標題、一種給正文，足以做出層次，卻不會顯得雜亂。字體太多，除了影響閱讀的一致性，還有一個容易被忽略的附帶問題，就是每一款字體都要額外下載一個檔案，種類越多，頁面載入的速度就越慢。
要數清楚自己的網站載入了幾種字體，一樣打開開發人員工具，切到「網路」（Network）這個分頁重新整理頁面，篩選出字體相關的請求，或是直接在樣式面板裡逐一檢查不同區塊的 font-family 設定值，把不重複的種類數出來，超過三種就代表該精簡了。
一行塞的字是不是太多？
桌面版最常見的狀況，是內文容器沒有限制最大寬度，螢幕多寬，文字就鋪多寬，一行塞進了大量文字。訪客讀到一半視線跟丟，得花額外的力氣重新找到下一行該從哪裡接續，讀起來特別累。
W3C 的 WCAG 第 1.4.8 條「視覺呈現」明訂，一行的寬度不應該超過 80 個字元，如果是中文這類方塊字（CJK），上限要再砍半，大約 40 個字。這個規定背後的邏輯是，中文字的資訊密度比英文高出許多，同樣塞滿一行，讀起來的負擔遠比英文字母重得多，所以國際標準才會特別對 CJK 語系訂出更嚴格的門檻。
要粗略檢查自己的網站有沒有這個問題，不需要精算，直接在桌面版螢幕上數一數內文一行大概塞了幾個中文字，超過 40 個字就已經偏長。改善的做法也很直接，把內文容器加上一個合理的最大寬度，常見做法是用 CSS 的 max-width 限制，讓文字不要整片鋪滿寬螢幕，行長自然就會收斂到舒服的範圍。
文字和背景的對比是不是不夠明顯？
淺灰色文字配白底、或是彩色底配彩色字，這類看起來很有設計感的配色組合，常常在不知不覺間犧牲了對比度，讓閱讀變成一場視力測驗，尤其是在戶外強光下用手機瀏覽時，對比不足的文字幾乎完全看不清楚。
W3C 的 WCAG 第 1.4.3 條「對比（最低要求）」明訂，一般文字與背景的對比度至少要達到 4.5 比 1；字級較大的文字（約 18 點以上，或是 14 點粗體以上）門檻可以放寬到 3 比 1。這兩個數字分開規範，道理很直接。字級越大，筆畫在畫面上佔的面積也越大，即使對比稍低，眼睛還是辨識得出來；正文這種小字級筆畫細，就得靠更高的對比撐住可讀性。
要驗證自己網站的配色過不過關，不需要靠肉眼猜，網路上有不少免費的線上對比度檢測工具，只要輸入文字色與背景色各自的色碼，幾秒鐘就能算出實際的對比比例，直接告訴你有沒有達到門檻。淺色系網站，像是白底配淺色文字、或是大面積留白的極簡風格，最容易踩到這個問題，值得優先核對。
兩端對齊看起來整齊，其實會製造「空格河」
左右邊緣都對齊、看起來比較整齊，是很多人排版時的直覺想法，套用兩端對齊（justify）之後，中文排版卻常常在字與字之間被硬擠出不規則的大空隙，形成俗稱的「空格河」，一路貫穿整個段落，把原本流暢的閱讀節奏切得七零八落。
web.dev 提到，兩端對齊的文字，字與字之間的間距會變得不平均，可能在頁面上形成一條條難以閱讀的空隙；U.S. Web Design System 也指出，兩端對齊雖然在印刷品上很常見，但目前瀏覽器還沒辦法把它顯示得夠好，不建議當成網頁排版的最佳做法。這兩個說法指向同一個結論，網頁內文用左對齊，不要用兩端對齊。
中文排版會比英文更容易出問題，原因在於中文字符的寬度固定，系統只能靠加大字距或詞距來硬湊齊左右邊緣；英文單詞長短不一，還能靠調整單詞間的空格勉強掩飾，中文卻沒有這個緩衝空間，空隙一擠出來就特別明顯。要檢查自己的網站有沒有這個問題，打開開發人員工具找到內文區塊，看樣式面板裡 text-align 這一項設定的是不是 justify，是的話就該改成 left，也就是靠左對齊。
換到手機版，字級和行距還合適嗎？
現在多數網站的訪客，已經是從手機瀏覽器點進來，但不少經營者只在電腦螢幕前仔細調過字體，換到手機這種小螢幕上，字級跟行距卻沒有跟著一起微調，結果桌面版讀起來很舒服，手機版卻擠成一團，同一批文字，體驗天差地遠。
手機版最容易出問題的地方有兩個。一是字級沒有隨著螢幕寬度縮小而做響應式調整，套用的還是桌面版那套數值，在小螢幕上顯得偏小；二是行距在小螢幕上會顯得更擁擠，因為每一行能塞的字變少，行與行之間的空間感也會被壓縮。
不需要靠肉眼在手機上瞇眼猜，Chrome 或 Edge 這類瀏覽器本身就有開發人員工具，裡面就有一個「切換裝置工具列」的功能，工具列上的手機圖示，或是快捷鍵 Ctrl+Shift+M，可以直接把畫面模擬成各種手機的螢幕寬度，而且是免費、不用額外安裝、任何人都能操作的官方功能。切到這個模擬檢視之後，再用前面同樣的方法點開樣式面板，看這時候實際套用的 font-size 跟 line-height 是多少，跟桌面版的數字對照一次，就能抓出手機版有沒有被忽略、還在用不合適的舊數值。
抓出問題後，這樣調整最有效率
把前面幾個檢查項目一項一項核對完，手上大概會列出好幾個要修的地方，這時候不用一次全部動工，也不必等到把整個網站設計砍掉重練。調整順序建議如下：
- 先調正文字級與行距：把字級調到至少 16px，行距調到字級的 1.5 倍以上，通常只要在 CSS 檔案裡改幾行數值就能完成，卻是影響閱讀體驗最大的兩個因素。
- 接著精簡字體種類：把整個網站用到的字體家族收斂到二到三種以內，標題、正文各留一種，清楚俐落，還能減少瀏覽器要下載的字體檔案數量，對載入速度也有幫助。
- 再檢查對比度與對齊方式：確認文字跟背景的對比夠不夠明顯，兩端對齊有沒有偷偷跑出「空格河」，這兩項牽涉的元素比較零散，適合放在後面逐一收尾。
- 最後切到手機版模擬檢視：確認同一套調整在小螢幕上看起來一樣舒服，不要桌面版改好了，手機版卻還是原封不動。
調整完，拿前面用過的工具重新複查一次：開發人員工具裡的樣式面板、免費的線上對比度檢測工具，還有瀏覽器的裝置模擬檢視，都是不用花錢的方法，每改一項就順手驗證一次，比等全部改完才一次檢查，更容易抓到還沒調整到位的地方。
訪客不會留言告訴你「你的字看不清楚」，他們只會默默按下上一頁，跳出率就這樣一路墊高，問題卻常常被誤會成內容寫得不夠好，或是設計不夠有質感，真正的原因反而被晾在一邊，遲遲沒人去查。現在就打開自己的網站，把今天核對過的這幾項網站字體易讀性判準一項一項套上去看看，抓到一項算一項，先從影響最大的字級跟行距開始動手，慢慢把每個訪客都讀得下去的網站，一點一點調整出來。