官網『字體與排版』(Typography) 設計完整攻略：中小企業如何用對的字體把專業感與可讀性同時做到位
字體與排版是中小企業官網最常被忽略卻最影響閱讀體驗的細節。一份從字級、行高、行寬到對比度的完整規格，給你可直接交付的具體數字。
一個被低估到不行的設計細節：字體
大部分中小企業老闆做官網時，會花很多時間爭論 logo 顏色、首頁大圖要不要動、聯絡按鈕要不要更大顆，但對「字體與排版」這件事卻幾乎沒意見——「就用預設的就好啦」、「Noto Sans 不是大家都在用嗎？」
問題是，訪客在你的官網上花最多時間看的，其實不是 logo、不是大圖，是文字。如果文字看不清楚、行距太擠、字級太小，他根本沒辦法理解你在賣什麼，更不要說產生信任感然後填詢問單。
排版做對了，網站感覺「專業、好讀、有質感」；排版做錯了，再貴的設計也會被一段難讀的字毀掉。這篇文章帶你把官網字體排版這件事從頭整理一次，給你一份可以直接交給設計師或自己照做的具體規格。
Photo by Peter Olexa on Unsplash
一、先搞清楚：字體不是「好看就好」，是「先好讀、再有個性」
很多人挑字體會落入兩個極端：一種是覺得「越花越時髦」，挑了極細手寫字當內文；另一種是完全不挑，整站一個字型走天下。
正確的順序應該是：
- 可讀性優先：內文一定要選結構清楚、筆畫不太細的字體。中文常見安全選擇有 Noto Sans TC、思源黑體、微軟正黑體、PingFang TC；英文則是 Inter、Roboto、Source Sans Pro、Helvetica。
- 標題可以有個性：H1、H2 這種大字級的地方，可以挑稍微有風格的字體做差異化，例如思源宋體、Noto Serif TC、或某些襯線英文字型，營造專業感。
- 不要超過兩種字型家族：一個給標題、一個給內文，最多就這樣。超過反而會讓網站視覺零散。
記得，內文字體是來「服務閱讀」的，不是來「展現設計師品味」的。手寫體、極細體、藝術字這些，留給 logo、封面圖、活動 banner 就好。
二、字級設定：別再用 14px 內文了，桌機請從 16px 起跳
這是一個非常多舊網站還在犯的錯。為了讓「資訊看起來多」，把內文字級調到 14px 甚至 13px。結果就是訪客一進來就皺眉、要瞇眼、要放大瀏覽器，停留時間直線下降。
給你一份可以直接套用的字級參考（桌機版）：
- 內文（body）：16px～18px，行高 1.6～1.8
- 小字／備註（caption）：13px～14px，不要拿來當主要閱讀內容
- H3 小標：20px～24px
- H2 段落主標：28px～36px
- H1 頁面主標：36px～56px
- 首頁 Hero 大標：48px～72px，視設計風格而定
手機版的內文，依然建議維持 16px 起跳。很多人以為手機螢幕小要把字體縮小，其實剛好相反——手機是用眼睛離螢幕更近的方式看，字反而要夠大才不傷眼。蘋果與 Google 的設計規範都明確建議手機內文不要小於 16px。
三、行高與字距：好讀的網站，留白都比你想像的多
行高（line-height）和字距（letter-spacing）是兩個最常被忽略卻最有感的設定。
行高建議：
- 中文內文：1.7～1.9（不要低於 1.5，會擠到看不清楚）
- 英文內文：1.5～1.7
- 標題（大字級）：1.2～1.3 即可，不需要太大
字距建議：
- 中文內文：可以設 0.02em～0.05em，給字之間一點呼吸空間
- 英文大寫標題（ALL CAPS）：要拉開到 0.08em～0.15em，否則會擠在一起
- 內文小寫英文：通常維持預設 0 就好
另外，段與段之間的距離至少要 1 倍字級，例如 16px 的內文，段落間就留 16～24px 的空白。這比你想像中重要很多——同一頁如果段落擠在一起，訪客掃讀時眼睛找不到分段，會直接放棄繼續往下看。
Photo by Luca Bravo on Unsplash
四、行寬：一行不要超過 35 個中文字 / 75 個英文字元
這是一個學術圈研究很久的閱讀規律：當一行文字太長，眼睛從行尾回到下一行的行首會找不到位置，閱讀效率掉一半。
具體建議：
- 桌機版內文區塊寬度：約 640px～760px（換算大約 30～40 個中文字一行）
- 千萬不要讓內文文字直接撐滿 1920px 螢幕寬，那是惡夢等級的閱讀體驗
- 如果你的版型一定要全寬呈現，至少要在文字外加 max-width 限制
很多 WordPress 模板的部落格內頁直接讓內文撐滿，這是要修正的第一件事。Medium、Notion、Apple 官網內容區，行寬全都控制在這個範圍內，不是巧合。
五、層級對比：H1、H2、H3 一定要拉開明顯的差距
常見的爛排版範本：H1 是 24px、H2 是 22px、H3 是 20px、內文是 16px。看起來「都有大小不同」，但訪客掃過去的時候根本分不出哪個是主標、哪個是小標。
正確的做法是「跳級」——每一階至少差 25%～50%：
- H1：40px
- H2：30px
- H3：22px
- 內文：17px
除了字級拉開，字重（font-weight）也要差異化：標題用 700（粗），內文用 400（一般）或 500（中粗）。如果整站所有文字都用 400 或全用 700，視覺層級會塌掉，訪客一打開頁面會感覺「資訊量好滿」，但其實是因為輕重不分。
六、顏色與對比度：黑底白字之外，請務必檢查 WCAG 對比
很多設計師為了「不要太刺眼」，會把內文文字用淺灰色（例如 #999、#aaa）放在白底上。看起來高級，但對比度可能只有 2.5:1，根本看不清楚。
無障礙設計規範（WCAG AA）要求：
- 內文文字與背景對比度至少 4.5:1
- 大字級（18pt 以上或 14pt 粗體）對比度至少 3:1
實務建議：
- 白底內文：用
#333或#222，不要用淺於#666 - 輔助說明文字：可以用
#666～#888，但不要拿來放重要資訊 - 連結文字：要有明顯顏色差異 + 底線，別只靠顏色（色盲訪客看不出來）
檢查工具：Chrome 內建的「開發者工具 → Lighthouse → Accessibility」可以一鍵掃描，也可以用 WebAIM Contrast Checker 線上工具。
Photo by Hal Gatewood on Unsplash
七、中英文混排：別讓英文字塞進中文字距裡
台灣中小企業官網常見的問題：一段中文裡夾雜英文單字或品牌名稱，整段看起來會「擠來擠去」。
解法：
- CSS 用
font-family同時宣告中英文字體，例如"Inter", "Noto Sans TC", sans-serif; - 瀏覽器會自動把英文字元套 Inter，中文字元套 Noto Sans TC，視覺上會自然很多
- 避免使用「全形空白」當作中英分隔的偷懶做法
八、實際檢查清單：今天就可以對你的官網做一次體檢
給你一份可以馬上跑一次的快速檢查表：
- □ 桌機版內文字級是否 ≥ 16px？
- □ 手機版內文字級是否 ≥ 16px？
- □ 內文行高是否在 1.6～1.9 之間？
- □ 內文行寬是否在 640～760px 之間？
- □ H1、H2、H3 的字級是否有 25% 以上的差距？
- □ 內文顏色對比度是否 ≥ 4.5:1？
- □ 整站是否最多只用兩種字型家族？
- □ 連結是否有明顯顏色差 + 底線？
- □ 段落之間是否有足夠的留白？
九題裡只要勾不滿七題，建議優先把排版這件事處理好——這比再花十萬調整版面、加新功能來得有感很多。
結語：排版做對，整站氣質瞬間升級
字體排版這件事很「悶」，老闆通常不會主動指定要怎麼做，設計師也不一定會主動提，最後就是用模板預設值上線。但如果你願意花一個下午把上述規格交給工程師或自己調一遍，整個官網會像「換了一層新皮膚」，那種「感覺更專業了」的氛圍，會直接反映在轉換率上。
下一次找設計師或工程師合作時，把字級、行高、行寬、對比度這些數字寫進需求單。把抽象的「希望網站看起來舒服」變成可以驗收的具體數值，你會少很多「成品看起來怪怪的」的扯皮時間。
如果你正在規劃官網改版、或想為現有網站做一次排版健檢，歡迎與奧隆股份有限公司聯絡，我們可以協助你把這些細節一次到位。
本文為 ORON 團隊撰寫的觀點分享，內容反映撰稿當下的實務經驗與看法，僅供參考。