有些網站一打開就很漂亮，文字卻小得吃力；有些文章內容很實用，但每一行都太長，讀沒幾段就想離開。問題不見得出在內容本身，而是字體和版面沒有替讀者想好。
網站的字體排版，往往是最容易被低估的設計工作。換個字型很快，但讓標題醒目、內文舒服、手機好讀，而且不拖慢網站，才是真正需要花心思的地方。
設計師 Jason Santa Maria 在《On Web Typography》談到，字體選擇必須回到內容和閱讀情境，而不是只憑個人喜好。對經營文章、企業網站、個人品牌或線上課程的人來說，這個觀念特別實用：讀者先看得懂，才有機會理解你的專業。
以下用 9 個重點，說明網頁字體排版的判斷方法。也會特別區分「值得參考的設計建議」與「無障礙標準真正要求的事」，避免把經驗值誤當成硬性規定。
一、先分清楚字元辨識性與整段文字可讀性
字元辨識性（Legibility），是指單一字元容不容易看清楚。例如英文字母 O 和數字 0 是否容易區分，繁體中文字在較小尺寸下會不會因筆畫擁擠而難辨認。
閱讀可讀性（Readability），則是整篇內容讀起來是否順暢。即使每一個字都很清楚，若一行太長、行距太擠，或文字顏色和背景太接近，仍然可能讀得很累。
因此，挑選字型時不能只看設計工具裡的展示字。請把網站真正會出現的文章、價格、標題、按鈕與表單說明放進去，實際看它們是否清楚。對需要長時間閱讀的課程網站或知識文章，整體閱讀感受通常比字體的新奇程度更重要。
二、字型先依用途挑選，不要先問哪一款最漂亮
選字型之前，先確認文字的工作。首頁的大標題需要在短時間內吸引注意；文章內文和課程講義則需要讓人長時間看得舒服。這兩種需求不一定適合同一種字體表現。
你可以把網站文字分成兩類：
- 短時間要看見的文字：首頁主標題、導覽選單、按鈕、課程名稱，重點是容易辨認、帶有品牌個性。
- 需要持續閱讀的文字：文章、商品說明、教學內容、常見問題，重點是清楚、穩定、不容易疲勞。
一般網站可先從一套支援完整繁體中文字元的字體家族開始，利用不同字重與大小建立層次。若確實需要第二套字體，最好讓它負責明確的工作，例如只用於大型標題，而不是每個區塊都換一款。
還要留意字型授權。可以在電腦上使用的商業字型，不代表一定授權嵌入網站。正式採用前，應確認網頁使用範圍與授權條件。
三、內文字級要夠大，卻沒有所有網站通用的神奇數字
網頁內文字級（Font Size）要考慮閱讀距離、字型筆畫、螢幕尺寸與內容性質。16～18 像素常被當成英文網頁內文的設計起點，但這不是國際無障礙標準規定所有網站必須採用的固定數值。
繁體中文筆畫較密集，長篇內容如果字太小，更容易看不清楚。網站可以用 18～20 像素當作文章內文的測試起點，再依真實字型、行高、欄寬與裝置做調整；這只是實務建議，不是人人適用的標準答案。
有一個簡單的檢查法：把網站打開，用平常閱讀手機的姿勢連續看三到五段。如果需要把手機拿得特別近、反覆放大，或總覺得眼睛必須很用力，應該先檢查字級與對比，而不是期待讀者自行適應。
也不要為了讓畫面看起來精緻，就刻意把重要的價格、付款說明或表單提示縮得很小。重要資訊應該讓人容易閱讀，而不是藏在角落。
四、行高和段落間距，決定文章讀起來順不順
行高（Line Height）是相鄰兩行文字基線之間的距離。行高太緊，中文字會像擠在一起；太鬆，讀者的視線又容易在換行時失去連續感。
長篇中文內文可先試著把行高設在字級的 1.5～1.8 倍，再看實際效果。例如字級是 20 像素，行高可以從 1.6 倍開始比較。標題通常需要比內文緊一些，避免兩行大字之間散得太開。
段落間距也要一起看。兩段不相關的內容，應有足夠間隔；同一個標題與它下面的文字，則應靠得比較近。這會讓訪客即使只是快速滑過，也能自然看懂文章的分段。
無障礙指引要求預設行高一定要 1.5 倍嗎？
不是。網頁內容無障礙指引（Web Content Accessibility Guidelines，WCAG）2.2 的 1.4.12「文字間距」準則，重點是使用者自行調大間距時，網站不能因此遺失內容或功能。
這項 AA 等級準則檢查的調整包含：行高至少為字級的 1.5 倍、段落後間距至少為字級的 2 倍、字距至少為字級的 0.12 倍、詞距至少為字級的 0.16 倍。它不是要求每個網站的預設 CSS 都寫成這些值。對不使用某些間距特性的語言，也有相應例外。
換句話說，設計師可以依品牌需求決定平常的行高，但必須避免把文字鎖死在固定高度的容器裡，導致使用者調整後出現重疊、截斷或按鈕無法點擊。
五、文章不要鋪滿整個螢幕，行長比想像中重要
行長（Line Length）是每一行文字的閱讀寬度。桌機螢幕很寬，不代表文章應該從左邊一路排到右邊。當視線從很長的一行尾端回到下一行開頭時，讀者比較容易失去位置。
許多英文排版指南會用每行約 45～75 個字元作為參考，但不能直接把這個數字搬到繁體中文。中文字通常占據較接近正方形的字框，標點與斷行規則也不同。
全球資訊網協會（World Wide Web Consortium，W3C）的《中文排版需求》特別整理中文排版的行長、字距與標點規則。文件所談的書籍排版行長可提供理解基礎，但網頁還需要再考慮螢幕寬度、字型與使用者放大文字的情境。
實作時，先給文章內容設定合理的最大寬度，再放入真正的繁體中文長段落測試。若桌機上一行太長，就縮窄內容欄；如果手機上一行短到不斷換行，就檢查左右內距或字級。目標是閱讀順暢，不是追求固定字數。
六、建立標題層級，比把每個字都加粗有效
文字視覺層級（Typographic Hierarchy）讓讀者知道閱讀順序：先看主標題，再看章節標題，接著讀內文與補充說明。好的層級不需要處處強調，而是讓真正重要的資訊自然突出。
網站可用字級、字重、顏色和留白建立差異，但不必每個層級都同時改變全部條件。例如主標題較大、章節標題加粗、說明文字稍微淡一些，就可能已經很清楚。
最容易忽略的是標題上下留白。標題通常應該更靠近它所介紹的段落，和上一段保留較大的距離。否則讀者會覺得標題漂浮在兩段文字之間，不知道它屬於哪一段。
標題的結構也要正確。網頁主要標題使用 H1，主要章節用 H2，章節內的子題用 H3，不要只是為了某個字級好看，就把所有內容都設成相同的標題層級。這有助於使用者與輔助技術理解文章架構。
七、繁體中文和英文混排，需要用真實文字檢查
台灣網站很容易遇到中英文混排（Mixed-script Typography）：一段中文裡可能同時出現 WordPress、AI、百分比、價格、網址和產品名稱。問題不只是字型是否漂亮，還包括中英文的視覺高度、粗細、基線以及標點位置。
例如，某款英文字型的大寫字母非常高，放進中文段落後可能看起來特別突出；另一款中文字型筆畫偏厚，與細瘦的英文字母排在一起，也可能顯得不協調。
比較實用的測試素材，不是設計軟體裡的假文，而是你網站真的會用到的內容：課程名稱、NT$2,400、100% 完成、Email、長中文標題、括號與引號。這些組合有沒有正常換行、粗體是否協調、字距是否奇怪，都值得逐一檢查。
另外還有繁體中文常見的行首行尾禁則：不適合出現在行首或行尾的標點，應由排版系統合理處理。相關原則可參考 W3C 的《中文排版需求》，不必把英文網站的排版手法全部照搬。
字重（Font Weight）也要實測。一般文字不宜過細，標題也不需要一律用最粗的字重。繁體中文字筆畫多，太粗可能變得擁擠；太細則可能不容易辨認。
八、手機排版不只是把桌機字級等比例縮小
響應式字體排版（Responsive Typography）會隨裝置調整字級、標題換行、行高與欄寬。桌機上的兩行大標題，到了手機可能變成五行；若沒有重新安排，很容易把重要內容全部推到畫面下方。
設計時要先檢查實際手機上的閱讀體驗：標題有沒有在奇怪的位置斷行？按鈕文字是否被擠成兩三行？表格是否超出螢幕？使用者放大文字時，內容是否仍然完整？
網頁樣式表（Cascading Style Sheets，CSS）提供 clamp() 函式，可以設定字級的最小值、隨螢幕變化的理想值與最大值。它很適合用在大型標題，但並不是所有字都一定要隨螢幕持續縮放；長篇內文往往更需要穩定、容易閱讀的大小。
真正要測試的，不只是設計工具提供的手機預覽畫面，也包括實際裝置、放大設定，以及較狹窄的螢幕。即使是同一套網站版型，不同內容長度也可能產生完全不同的換行結果。
九、漂亮的自訂字型，也需要考慮載入速度
網頁字型（Web Font）通常要另外下載。當網站同時使用多套字體、很多字重，尤其包含大量繁體中文字元時，字型檔案就可能成為載入負擔。
Google 的 web.dev 字型效能指南提到，字型不只影響文字何時顯示，也可能在正式字型載入後，因文字寬度不同而造成畫面位移。這種累計版面位移（Cumulative Layout Shift，CLS），會影響實際瀏覽感受。
處理方式不必從複雜技術開始：先確認是否真的需要那麼多字重，再考慮使用壓縮效率較好的 WOFF2 格式、依需要分割字型字元集（Font Subsetting），以及避免所有頁面都載入不會用到的字型。
備援字型和字型顯示策略，應該一起規劃
備援字型（Fallback Font）是在自訂字型還沒下載完成、或無法使用時，暫時顯示的字型。選得好，使用者幾乎不會察覺；選得差，正式字型一出現，整段文字就可能重新換行。
CSS 的 font-display 能決定字型下載期間的顯示策略。例如 swap 通常會先顯示備援字型，下載完成後再切換；optional 則在字型來不及使用時，可能於這次頁面瀏覽持續採用備援字型。
沒有哪一種設定永遠最適合所有網站。長文章應優先讓文字儘早出現、版面保持穩定；高度重視指定字型的品牌頁，則可能需要不同取捨。實作後最好實測網路較慢時的畫面，而不是只看自己的電腦。
網站字體排版實用檢查表
不需要一次重新設計整個網站。可以依照下面的順序，檢查最容易影響閱讀的地方。
| 檢查項目 | 要觀察什麼 | 建議處理方向 |
|---|---|---|
| 內文字級 | 手機與桌機是否需要費力辨認 | 以真實繁體中文試讀後調整 |
| 行高 | 行距太緊或太鬆 | 先試 1.5～1.8 倍，再依字型調整 |
| 文章寬度 | 桌機一行是否長到容易迷失位置 | 設定內容最大寬度 |
| 標題層級 | 能否一眼分辨主題與子題 | 統一標題大小、粗細與間距 |
| 中英文混排 | 價格、英文與標點是否突兀 | 使用真實內容測試 |
| 手機版 | 標題、表格與按鈕是否擠壓變形 | 調整換行、欄寬與內距 |
| 字型載入 | 文字是否延遲出現或突然跳動 | 減少不必要的字型檔與字重 |
| 無障礙 | 放大文字、修改間距後是否仍能操作 | 避免固定高度與文字截斷 |
如果是線上課程網站，還可以把課程介紹、章節目錄、價格說明與學員中心各選一頁測試。因為文章好讀，不代表表單、按鈕和會員介面也一定好用。
若想進一步了解字體如何和品牌視覺、動畫及操作細節一起影響網站品質，可延伸閱讀〈頂級網站設計的 9 個共同點：從國際獲獎網站學會真正的設計標準〉。若遇到整體網站載入慢的問題，也可參考〈WordPress 網站速度很慢怎麼辦？新手可以先做這幾件事〉。
常見問題
網站內文一定要設為 18 像素嗎？
不一定。18 像素是可以測試的起點，但不是硬性規定。字型本身、行高、文字寬度、繁體中文筆畫與使用裝置，都會影響最終的閱讀感受。
中文文章每一行應該排幾個字？
沒有所有網站都適用的固定數字。英文字元的建議範圍不宜直接照搬到中文。先控制合理的內容寬度，再用真實中文段落和手機版實測，比死守字數更有用。
網站只能使用一種字型嗎？
不是。很多網站用一套字型家族搭配不同字重就能完成設計；需要明確的品牌風格時，也可以使用兩套。重點是角色清楚，而且不能讓額外的字型拖慢載入。
使用 WCAG 就一定要把行高設成 1.5 嗎？
不是。WCAG 2.2 的文字間距準則，是要求使用者調整行高與其他間距時，內容和功能仍須保留，不是規定所有網站預設行高都必須是 1.5 倍。
字型載入可以只用 font-display: swap 嗎？
可以依需求使用，但不是唯一答案。如果正式字型和備援字型差異很大，切換時可能造成版面跳動。應一起檢查備援字型、字型大小與實際載入情況。
手機字體應該比桌機更小嗎？
不一定。手機版需要看閱讀距離、內容寬度與實際字型。大型標題通常需要重新安排，但長篇內文不應只是為了塞進畫面就越縮越小。
結語：讓內容更容易被理解，才是網頁字體排版的目的
一個網站的字體排版做得好，讀者未必會特別注意字型名稱，卻會感覺內容清楚、閱讀輕鬆，而且很容易找到重點。
從挑選字型開始，到字級、行高、行長、層級、繁體中文混排，再到手機版、字型載入與無障礙，這些看起來分散的小決定，其實都在服務同一件事：讓使用者更順利地理解網站內容。
如果正在整理自己的網站，先從一篇真正有人閱讀的文章下手。把最讓人費力的地方改善，再逐步套用到其他頁面，比一次更換所有字型，更容易看出設計是否真的進步。
參考資料
A Book Apart｜On Web Typography｜2014
W3C｜Requirements for Chinese Text Layout｜2026年查閱
W3C｜Understanding Success Criterion 1.4.12: Text Spacing｜2026年查閱
Google web.dev｜Optimize web fonts｜2026年查閱
MDN Web Docs｜font-display CSS at-rule descriptor｜2026年查閱