Web與排版學上的字體問題 - 網頁設計 |
http://webdesign.zoapcon.com
|
|
關于字體的討論,其實無論是國外還是國內,都已經有不少,可是我發現絕大部分的內容或者有失偏頗,或者不夠全面,下面我試圖將自己一段時間內的觀點總結一下,以求提出一個比較容易接受的 CSS 字體選擇的建議。 事關大小
字體的大小總是一個困擾人的問題,用絕對單位還是用相對單位?或者具體來說,用什么單位?ex? em? pt? px? 百分比? 讓我們看看 CSS 2.1 Spec 中的說明:
font-size 制定的大小而言的,例如 margin: 1.2em 就是指設置 1.2 個字符寬度的 margin,當 em 本身用于 font-size 時,指的是它所繼承元素的相對大小。 百分比也是相對 font-size 而言的。 因此我認為,em 和百分比都不適合設置字體的大小,因為相互變動的因素太多了,修改一個地方就有可能影響很多其他的地方。ex 是根據拉丁字母的 x 的高度而言的,這不適合漢字的大小,所以也否決了。px 是根據當前顯示設備的解析度而言的,同一個 px 對應不同的設備——比如屏幕或紙張——實際的大小會有一定差異。 所以我認為,如果網頁中應該存在作為絕對參照系的長度,那么 pt 和 px 應該是首選,其他的長度根據這個絕對參照系,按照百分比或者 em 來變動。 下面談談網頁和印刷中大小造成的差異。99% 的網頁是用來在屏幕上閱讀的,而問題在于,屏幕的解析度要比紙張低得多,所以如果直接把字體按照紙張上印刷的那個大小顯示,肯定是看不清的,僅就英文字體而言,許多細微的點劃、襯線都沒法在那么低的解析度下表現出來,所以我們只能用專門設計給屏幕顯示的字體。 這些字體的優劣是很難評述的,有一種看法認為,盡管紙張印刷中都傾向于有襯線 (serif) 的字體比無襯線 (sans-serif) 的要易讀,但屏幕上無襯線的字體反而要好一些。所以微軟把 Verdana 吹捧為了最適合網頁使用的字體。我通常也偏向于使用 Verdana、Arial 多于 Times、Georgia。 對于中文字體的情況有所不同,中文字體在屏幕上的清晰顯示依賴的是點陣字體,或者簡單的說,就是微軟隨 Windows 提供的宋體和新宋體 (simsun & nsimsun),這套字體是華康公司 (Dynalab) 設計的,對 9pt 到 12pt 左右的字體都設計了對應的點陣字體。其中使用得最廣泛的是 9pt, 10.5pt 和 12pt 的字體:
那么比這個大小要大的漢字呢?就要依賴操作系統的字體圓整 (anti-alias,以下簡稱 aa) 技術了,一般大家認為,Mac OS X 和 Linux 下的 AA 要比 Windows 的 ClearType 好很多。然而不管怎么說,用太大的漢字是比較危險的。 事關空間今天新加一節,本來計劃好的,昨天寫的時候又忘了。 這里的空間指的是 letter-spacing 和 line-height,也就是字間距和行間距。首先,良好的行間距是排版最重要的地方,你可能不能自由選擇字體,字號的選擇也受諸多限制,但至少行間距的選擇是可以完全由自己控制的。 所謂的
在印刷排版中,習慣用 pt 來指定行高,比如所謂采用 12/14pt 排版,就是字號 12pt,行高 14pt;而 Web 中似乎習慣用百分比來設置,這個見仁見智,只要自己看得順眼就行。但必須注意的是,瀏覽器默認的行高一定是不夠的,尤其對于希望瀏覽者長時間閱讀的內容,行高 - 字號至少要有 2pt 以上。更苛刻的排版學家通常推薦 3pt 以上,但畢竟 Web 上可以隨意一點。 但
大部分的 User Agent,當然也包括你的瀏覽器,都會根據字體的 kerning table 自動做這個微調工作,但倘若你使用 CSS 來修改 letter-spacing,這個工作就白費工夫了。所以我才建議不要隨便調整 letter-spacing。比如 WordPress 原來的 Classic Theme (Dave Shea 設計,Matt 修改),就犯了這個毛病。 事關風格談到英文字體,可以扯出許多掌故,不過這里且說說 Web 開發有關的。 關于 Times New Roman,首先,與大家一般保留的印象不同,Times 不應該是一個適合長時間閱讀的字體,尤其不適合書籍的閱讀,因為眾所周知的,Times 一開始是給報紙設計的一種字體,而為了適應報紙這種在劣質紙張的快速印刷的環境,字體的襯線不得不夸張一些,否則細節很容易被油墨破壞,所以把 Times 用在書籍上其實是一種很不負責任的方式。 比這個更不負責任的是用 Times New Roman,Times New Roman 其實是一種壓縮 (Condensed) 了的 Times,比原來的 Times 更細長,更不易讀了。下面的一個比較應該比較容易分辨出優劣來:
Times 與 Times New Roman 的比較
TAG: 網頁設計 | web design |
|
- Jun 20 Wed 2012 19:02
Web與排版學上的字體問題_網頁設計
close
文章標籤
全站熱搜
留言列表