（瀏覽：637  更新日期： 2026-10-10）

網頁設計字體大小怎麼抓？

網頁設計字體大小建議內文使用16px（約1rem）作為基準，太小容易造成手機閱讀吃力；標題則可依層級用20px到36px不等做出區隔，並搭配1.5倍左右的行高，讓文字有足夠呼吸空間。若想參考完整的版面配置，可以看網站版型設計整理。

除了字體大小本身，也建議留意手機與電腦畫面的字級是否需要分開設定（RWD響應式設計），並確保文字與背景的對比度足夠，避免淺灰色字體在強光環境下難以閱讀。

字級需要放進實際版面判斷，可搭配網站設計尺寸檢查欄寬與螢幕差異，再用網站版型設計方式整理標題、正文與行動按鈕的層次。

不同元素的字體大小可以怎麼設定？

內文以 16px 為基準，標題依層級逐步放大，是目前最穩妥的做法；下表是常見的參考範圍，不是硬性規定。

行高與每行字數怎麼抓，閱讀才不吃力？

中文內文的行高通常抓字級的 1.6 到 1.8 倍，每行約 30 到 40 個中文字最容易閱讀。

行高太小會讓文字擠在一起，太大又會讓段落鬆散。如果內容欄位太寬，一行字數過多，眼睛換行時容易看錯行，這時應限制內容欄位的最大寬度，而不是一味放大字級。

字體單位該用 px、em 還是 rem？

建議以 rem 作為主要單位，因為它會跟著使用者瀏覽器的預設字級調整，對需要放大文字的使用者比較友善。

px 是固定像素，容易控制但不隨使用者設定變化；em 以所在元素的字級為基準，巢狀使用時容易層層放大；rem 則統一以根元素為基準，比較好管理。需要在不同螢幕寬度間平滑調整標題時，也可以使用 CSS 的 clamp() 設定字級的下限、理想值與上限。

字體對比度與手機閱讀有哪些要注意？

一般內文的文字與背景對比度，建議至少達到 WCAG 建議的 4.5 比 1，避免淺灰字配白底。

手機上還有一個實務細節：iPhone 的 Safari 在輸入框字級小於 16px 時，點擊輸入框會自動放大畫面，造成版面跳動，所以表單欄位的字級建議不要低於 16px。字級仍要放進實際版面判斷，可搭配網站設計尺寸檢查欄寬與螢幕差異，再用網站版型設計方式整理標題、正文與行動按鈕的層次。