客戶說「字再大一點」:網頁字體大小,我們這樣拿捏 - KYART光沅創意
Back

客戶說「字再大一點」:網頁字體大小,我們這樣拿捏

網頁字體大小該怎麼定?我們的做法是:內文以瀏覽器預設的16px為基準,用rem這類相對單位設定,並確保使用者把文字放大到200%時版面不破(WCAG 1.4.4)。至於會議上最常聽到的「字再大一點」,多數時候客戶真正想說的,其實是「重點不夠明顯」。

早期我們會乖乖把字號加上去,結果下一輪又聽到同一句:整頁都變大了,那一行還是沒人看見。

 

「字再大一點」真正的意思是什麼?

通常是視覺層級沒做好,不是字太小。Nielsen Norman Group指出越大的元素越容易吸引目光,尺寸本身就是「重要性」的訊號,大的元素最好不超過兩個。全部放大,等於全部都不重要。

所以現在聽到這句話,KYART光沅創意的設計師會先反問一句:「這一頁,你最希望訪客先看到哪一句?」把那一句放大、加粗、多留一點白,其他內容退後一步。很多時候字號沒變,客戶卻說:「對,就是這樣。」

 

網頁字體大小要用px還是rem?

建議用rem等相對單位。MDN提醒用px把字級寫死,部分瀏覽器的使用者就無法調整字體大小;改用rem,字級會跟著使用者自己設定的預設大小縮放。

我們切版時,內文設1rem,標題依比例往上推;交付前會把瀏覽器縮放拉到200%,逐頁確認文字沒被裁切、按鈕沒有重疊。

 

接下來還有什麼值得注意?

MDN最近收錄了實驗性的<meta name="text-scale">,讓頁面字級跟著作業系統的文字大小設定縮放。目前支援還不完整,我們先觀察,但方向很清楚:字該多大,決定權正慢慢回到使用者手上。

 

把字放大很容易,讓對的那句話被看見,才是設計。

下次你想說「字再大一點」,不妨順便告訴我們,你最希望被看見的是哪一句。

 

參考資料:
Understanding SC 1.4.4 Resize Text(w3.org)
Visual Hierarchy in UX: Definition(nngroup.com)
font-size – CSS(developer.mozilla.org)
<meta name=”text-scale”>(developer.mozilla.org)

Zoe Wang
Zoe Wang
KYART 設計經理,2011年加入KYART光沅創意。設計不只涉及表面、美觀,是服務的前端與體驗的關鍵,擅長深度設計思考,幫助客戶從顧客的角度檢視它們的服務, 為服務改善設計,創造創新、以人為中心的好設計。