適切的網頁文字大小

(本來想要寫篇有用的文章,計算出目前通行的各種螢幕尺寸、解析度和實際觀看文字的大小之間關係,但因為懶得找資料,暫且作罷。為了怕這個想法再次流失,先post這篇上來引發話題)

之前看過一個 無障礙網路空間 的東西,開始注意到自己網站的 Layout 對於視力不佳的朋友來說,是否會看來太過吃力等等這類的問題,於是從 2004 年左右開始,我的網站文字大小就儘量遵照不用小字體或多彩文字夾雜等原則。

以羅馬字母為基礎的外文網站,因為每個詞的長度、拼字重點、前後文的群聚慣例等都足以提供讀者迅讀略讀的「視覺印象」,因此在設計網站外觀時往往可以將文字尺寸縮小,提供塊狀的文字區,搭配底色、圖示後呈現出近似印刷品非常漂亮的配置。

漢字是方塊字,且每個字都可以獨立存在,與前後字詞依附的必要性不若羅馬拼字來得強,因此在設計網站外觀時很難拿捏文字尺寸大小。設定得太大了些,系統預帶的細明體看起來「細弱無力」,設定得小些,辨識筆畫繁複的文字時又令人非常吃力。有些人會改用楷書字體,但在非 Windows 作業系統或大陸簡體字作業系統中又無法顯示,且這樣設定並不符合 W3C 的 font-family 標準字體規則。

在 Blog 盛行後,許多人開始大玩特玩 CSS 樣式表,為了呈現出類外文網站的視覺經驗,往往將漢字的尺寸設置為 12~14px (Pixel),甚至有小到 8~10px的,那真是小到要用放大鏡才看得清楚。px 的單位就是實際的像素,以主流通行的 XGA (1024x768)、SXGA (1280x1024),或是最近盛行的 WXGA (1280x768/800) ,不管螢幕解析度高低,總之 12px 就是高寬均為 12 個螢幕像素的大小。這個顯示大小在不同對角線尺寸的螢幕上,卻會呈現不同的實際大小。例如同樣 12px 的字在 17" XGA 上用尺來量的實際顯示寬度,與在 19" XGA 螢幕上的實際顯示寬度就小了一點。現在的螢幕越做越大,理論上來說實際顯示尺寸應該也會愈來愈大,但因為解析度也同時提高了,造成文字的實際尺量大小反倒日形微縮。

有些人說,應該改用 pt 單位 (points) 取代 px,這樣當螢幕解析度改變時,瀏覽器會調整實際顯示尺寸以符合設計時條件。但這卻無解於螢幕對角線尺寸差異的問題。我有段時期,為了兼容顯示美觀與提供觀看便利,會利用顯示比例 (%) 來設定文字大小,一般顯示文字就用 100% 以顯示瀏覽器預設或自訂的字體尺寸,標題 h1 / h2 用 130% 來提高比例凸顯重要性。這樣的好處是當使用者自行設定瀏覽器的「字形大小」選項時,利用顯示比例設定的文字大小會隨之調整。反之以 px 為單位固定尺寸的文字,不管瀏覽器怎麼調整字形大小,都會固定不變。

我後來沒有繼續沿用百分比例方式來設定文字大小,而回頭用 pt 單位。但在設定文字大小時,儘量使用 11~12pt 為一般顯示,偶爾一些不重要的附加資訊使用 10pt 當作小字減輕版面複雜度,標題文字都在粗體 13~14pt 之間。這樣的設計雖然版面看來不甚清新,但眼睛不吃力,讀起來輕鬆愉快。況且因為字體放大了,同樣字數的段落內容感覺也比較豐富,算是別種意料外的收穫。

放大文字後最麻煩的,就是整塊版面看起來會很平,有點小醜。如果要稍加增強橫向行列的感覺,這時候可以在 CSS 中設定 line-height 增加行與行之間的距離。通常只要將 line-height 設定比你的文字高度多 30~50%,行列的感覺就可以出得來。各位不妨試試看。


切記,小文字對於一般讀者沒有視覺障礙者而言沒問題,但對於視障(含弱視、近視、老花眼)人士來說,都會帶來非常痛苦的閱讀經驗。既然網頁是要對外開放給他人閱讀使用,建議還是多體貼一點,放大網頁文字設定,幫助視力稍弱的朋友一點忙吧。


PS. to 墨綠,
這篇並不是專門給你的,雖然你最近的舒暢也是受惠於同樣的思惟結果。

Re:適切的網頁文字大小

@PPLE | http://blog.pixnet.net/archons | 2007-02-05 17:45:15

塔客兄..
你這篇也寫出我的心情啊,現在的BLOG很奇怪,字都很小很小,看得我幾乎眼睛都貼到螢幕上去了---不誇張,我二隻眼睛都近視八百,散光二百,眼睛之差是視力正常的人無法想像的。

Re:適切的網頁文字大小

小公主 | 2007-02-05 23:24:55

我檢討
是說我orz

可是我已經設定好的不知道要怎麼改
有四百多篇文章耶
一篇篇改我會累死

Re:適切的網頁文字大小

Daphne | http://www.wretch.cc/blog/daphnelo | 2007-02-06 17:32:02

寫的很好!! 繼續~

Re:適切的網頁文字大小

杜生之 | 2007-02-08 01:58:41

醜跟視力兩者擇一
我當然選擇後者

而且我不覺得字放大很醜

Re:適切的網頁文字大小

Yikuang | http://yikuang.blogspot.com | 2007-02-13 10:37:55

我也是大字體的愛好者,看得清楚最重要,多按幾下pagedown鍵盤又不會壞,不過用了firefox後,至少可以自助,"ctrl""+"或"-",就可以自己隨意調整,雖然有時候有點醜,但是不必虐待自己的眼睛。

Re:適切的網頁文字大小

Takol | 2007-02-13 10:57:08

Firefox 的確可以放大字體啦,但用 IE7 整個網頁同比例放大看起來不是比較順眼嗎?

呼~呼~ 我不討厭 Firefox,但也得要平衡報導哩。

回應留言

姓名:
Email:
網站:
標題:
為了防止垃圾留言,請動動腦筋計算一下:
五加上五等於多少? (阿拉伯數字)
Menu_home
Menu_category
Menu_label
Menu_calendar
Menu_rss
木由子的咆笑日記