網站字體怎麼選？中文字級、行距與手機閱讀檢查

網站字體怎麼比較？先放入同一份真實中文

比較字體時，固定文字、字級、欄寬與底色，每次只換字體。這樣才能分辨差異來自字形，還是另一版剛好字比較大、留白比較多。

準備一段正式服務介紹、一個最長的服務名稱、一組數字與單位，以及表單會出現的提示。也放入公司名稱、人名或特殊用字，避免只看常見字，直到上線才發現部分文字突然變成另一種樣子。

黑體、明體與裝飾字，先看用途再選

黑體通常筆畫粗細較均勻，明體常有較明顯的粗細變化與收筆特徵，裝飾字則可能強調個性。這些只是辨認字形的起點，不能直接推論黑體一定清楚、明體一定難讀。真正影響閱讀的，還包括實際字型、粗細、尺寸與螢幕顯示。

如果喜歡的字體縮小後細節不容易辨識，可以先用於較大的標題，正文另選更適合連續閱讀的字體。不要為了全站都用同一款字，就讓說明、表單和按鈕也跟著變得費力。

測試時連續讀完一段文字，再看筆畫密集的字是否擠在一起、數字是否容易分辨，以及中英文混排是否協調。遇到問題，先試字級與字重的調整；若調整後仍然難讀，就換另一款字體比較。

先分配文字角色，再決定要用幾種字體

一般品牌網站可以先挑一款正文與一款標題字體試排；同一字體靠粗細與大小建立層次，也完全可行。選擇標準是資訊有沒有主次，而不是字體種類越多越完整。

文字用途	優先確認	容易忽略的問題
頁面主標題	主題清楚，長標題能自然換行	只有短標語排得下，正式標題被迫縮小
段落小標	和正文有明確差異，層級一致	所有小標一樣搶眼，讀者分不出主次
長篇正文	連續閱讀清楚，行距與欄寬合適	為了畫面精緻而使用過細、過小的字
按鈕與表單	動作和填寫說明完整可讀	文字放大或換行後被固定高度切掉
圖說與補充文字	資訊較次要，仍能正常閱讀	把重要條件藏在很淡的小字中

選定角色後，把字體名稱、粗細與用途寫在一起。例如正文用一般粗細，段落小標用較粗版本，主要標題再拉開尺寸。不要讓每個新增頁面各自挑一套字級，否則同樣的服務小標可能今天很大、明天又像圖說。

字級決定文字顯示多大，標題層級則說明文章如何分節。H1、H2、H3 表示內容的主從關係，不能只因為某個字看起來比較小，就把重要章節改成普通段落；也不應為了放大一句廣告詞而亂用最高層級標題。

若品牌已有規範，可先從品牌識別與使用規範確認哪些特徵需要保留，再為網頁補上閱讀與載入方式。印刷標題的做法可以參考，但不必把同一尺寸和字距直接搬到手機。

字級、行距和欄寬，要放在一起調整

文字不好讀時，先確認字是否太小，再看行距與每行長度。只放大字體，可能讓窄版面每行只剩幾個字；只加大行距，也可能讓一句話的前後行看起來彼此分離。

用一段正文找出合適的起點

字級是文字大小，字重是筆畫粗細，行高則決定每行文字所占的高度。比較兩種設定時，先調一項，再重新讀完整段，才知道是哪個改動讓閱讀變得清楚。

可先將正文以 16–18 CSS px、約 1.6–1.8 倍行高試排，再依字型與讀者調整。這是比較用的起點，不是所有網站都必須套用的尺寸，不宜當成驗收的唯一條件。字面較小或筆畫偏細的字型，可能需要不同設定。

例如以 18 CSS px、1.7 倍行高試排，行框高度為 30.6 CSS px。這個數字描述的是排版行框，不等於每個字的可見高度；不能把兩種字體都設成 18，就認定閱讀感受完全相同。

電腦版長文不必隨螢幕無限拉寬。當一行太長，讀者從行尾回到下一行開頭可能不容易找到位置。可以限制文章欄寬，讓兩側留下空間；手機則先保留合理邊距，避免文字貼到螢幕兩側。

留白與字重，比硬加字距更值得先檢查

中文正文不一定需要明顯加寬字距。先用字體原本的間距試讀，只有在實際畫面需要時再調整。過度加寬可能讓一句話變得鬆散，也會增加換行；把整段文字強制平均分散，同樣可能產生不自然的空隙。

段落之間要看得出區隔，但不必每句都另開一段。相同論點可以留在同一段，需要轉換問題時再分段。標題和下一段的距離，則應讓人看出它們屬於同一節。

文字顏色也會改變閱讀感受。字體太細又配上淡色時，只增加字級未必足夠；可以搭配品牌配色與文字對比的檢查方法，確認字與背景的組合，再回到手機看實際效果。

缺字與備援字體，不能等上線後才處理

主要字體無法使用或缺少某個字時，瀏覽器可能改用其他字體顯示。備援字體就是為這些情況準備的替代選擇，必須連同主要字體一起測試。

同一段文字中，中文、英文與數字也可能由不同字體顯示。因此，不只要看整段風格，還要觀察行內某個字是否突然變大、變細，或和其他文字高低不一致。若是公司名稱裡的字特別突兀，應先確認字型是否真的支援該字。

請製作人員列出主要字體、備援順序及最後使用的一般字體類別。不同裝置可用的字體不同，備援方案的目標是文字仍然清楚、版面仍可用，不是保證每台手機的字形完全相同。

測試範圍可以包含品牌名稱、括號與引號、英文縮寫、價格格式和常用單位。遇到缺字時，應更換合適字型或調整字元涵蓋方式，不要把整段文字改成圖片來遮掩問題。正文保留為文字，日後才能搜尋、複製及調整閱讀大小。

下載字體時，先確認文字能不能及時讀到

使用需要下載的網頁字體，要檢查下載期間顯示什麼，以及字體替換後會不會改變換行。只看載入完成的設計畫面，可能漏掉訪客剛開啟頁面時遇到的問題。

例如採用 font-display: swap 時，瀏覽器經過極短的等待後可先顯示備援字體，主要字體準備好後再替換。文字不必長時間隱藏，但兩種字體寬度不同，仍可能讓標題多出一行、按鈕位置改變。這項設定要和備援字體、欄寬及容器高度一起確認。

請製作人員在較慢網路下重新載入頁面，觀察正文是否可讀、標題是否跳動，以及重要按鈕是否被推到別處。也測試字體檔無法取得時的畫面；若整頁因此缺字或無法操作，就不能只把問題歸咎於訪客網路。

載入哪些字體和粗細，也應依實際使用決定。沒有用到的版本不必全部下載。若需要精簡中文字元，必須考慮未來新增文章與人名，不宜只保留首頁現在出現的字。交接時記下字體來源、網站使用條件與管理方式，讓日後維護的人知道要核對哪份資料。

上線前，用四個步驟檢查手機閱讀

先讀正文，再測試文字放大、間距調整與備援顯示。每一步都看實際內容是否完整、操作是否可用，不能只看縮小的設計預覽。

1. 以一般手機寬度讀完一段正文，確認不用先放大才能辨識。再查看長標題、圖說、按鈕和錯誤提示。
2. 用瀏覽器支援的方式逐步放大至 200%，檢查正文、欄位標籤與按鈕文字是否被切掉、重疊或遮住。修正後用相同設定再測。
3. 請製作人員測試使用者增加行高、段落間距與字距後的畫面。依使用語言確認適用項目，中文和英文混排時，也要依各自的文字特性檢查，不能把不適用的詞距設定一律套進所有段落。
4. 重新載入頁面並測試字體下載失敗，確認替代字體出現後，長標題和按鈕仍完整、主要內容仍可讀。

文字間距檢查是在測試版面能否容納讀者的調整，不是要求網站預設套用同一組間距。放大測試也只是驗收的一部分，不能據此宣稱整站所有無障礙需求都已完成。

如果按鈕文字換成兩行就消失，應請製作人員檢查固定高度與裁切設定；若表單說明放大後壓住輸入框，則要調整間距與排版。不要直接禁止縮放，或把文字改回小字來避開問題。表單的閱讀和操作可接著依聯絡表單的欄位與提示設計一起驗收。

記錄問題時，寫出頁面、裝置、測試方式與受影響內容。例如「手機服務頁放大後，第二個按鈕的下排文字被切掉」，就比「字體再舒服一點」更容易讓製作人員找到原因。

把確認過的設定整理成一頁文字規範

文字規範要讓下一位編輯知道如何使用，而不只是保存設計稿。至少列出主要字體與備援、標題與正文的用途、字級與行高，以及長標題超出時怎麼處理，再附上實際頁面的範例。

手機與電腦需要不同設定時，分別註明；哪些數值可以隨版面調整，也要交代清楚。例如文章主標題可以自然換行，但按鈕要完整顯示動作名稱，不能為了塞進一行任意刪掉重要文字。

後台編輯者應優先使用既有標題和段落樣式，避免每篇文章重新指定字體、字級與顏色。當新文章出現很長的標題、特殊字或表格時，再補進測試範例，讓規範逐步涵蓋網站真正會使用的內容。

網站字體常見問題

手機和電腦一定要使用同一款字體嗎？

不一定，但閱讀層級與品牌方向應一致。若使用裝置內建字體，兩邊字形可能不同；若載入指定網頁字體，也仍需備援。重點是不同裝置都能讀清楚，長標題、按鈕與正文不會因替換而缺字或被切掉。

正文一定要 16px 才符合要求嗎？

沒有只看 16px 就能判定整頁合格的做法。相同設定在不同字型下，實際字面大小和筆畫仍可能不同。應一併檢查字重、行距、對比與放大後的內容，並依讀者與用途調整。

品牌喜歡細字，可以整站都用細字嗎？

應先測試最小的必要文字。較大的標題可以保留細字風格，正文與表單則選擇清楚的粗細。若需要靠放大或猜測才能讀出內容，就應調整；可以透過標題、配色和版面保留品牌風格。

先拿一篇文章和一個表單做完整試排

挑一篇有長標題、正文與圖說的文章，再加上一個含提示文字的表單。用同一組候選字體完成試排，依序確認閱讀、放大、間距與備援顯示。把找到的問題與調整結果記在一起，確認這兩種常用頁面都能使用後，再將設定套用到其他頁面。