您的位置: 首頁 > 藝術設計 > 設計理論 > Web與排版學上的字體問題
高分辨率下界面布局的解決方案 回到列表 亞馬遜網站導航欄的變遷史
 Web與排版學上的字體問題

作者:jjgod 時間: 2006-04-23 文檔類型:轉載 來自:jjgod的blog

第 1 頁 Web與排版學上的字體問題 [1]
第 2 頁 Web與排版學上的字體問題 [2]

關于字體的討論,其實無論是國外還是國內,都已經有不少,可是我發現絕大部分的內容或者有失偏頗,或者不夠全面,下面我試圖將自己一段時間內的觀點總結一下,以求提出一個比較容易接受的 CSS 字體選擇的建議。

事關大小

字體的大小總是一個困擾人的問題,用絕對單位還是用相對單位?或者具體來說,用什么單位?ex? em? pt? px? 百分比? 讓我們看看 CSS 2.1 Spec 中的說明:

1、相對大小包括:em, ex, px
2、絕對大小包括:in, cm, mm, pt, pc
3、em 就是相對 font-size 制定的大小而言的,例如 margin: 1.2em 就是指設置 1.2 個字符寬度的 margin,當 em 本身用于 font-size 時,指的是它所繼承元素的相對大小。
4、百分比也是相對 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,也就是字間距和行間距。首先,良好的行間距是排版最重要的地方,你可能不能自由選擇字體,字號的選擇也受諸多限制,但至少行間距的選擇是可以完全由自己控制的。

所謂的 line-height,指的是兩行字基線 (base-line) 之間的距離,什么是基線?下面圖中的紅線便是,對于漢字,則應該就是底部的水平線。

在印刷排版中,習慣用 pt 來指定行高,比如所謂采用 12/14pt 排版,就是字號 12pt,行高 14pt;而 Web 中似乎習慣用百分比來設置,這個見仁見智,只要自己看得順眼就行。但必須注意的是,瀏覽器默認的行高一定是不夠的,尤其對于希望瀏覽者長時間閱讀的內容,行高 - 字號至少要有 2pt 以上。更苛刻的排版學家通常推薦 3pt 以上,但畢竟 Web 上可以隨意一點。

但 letter-spacing 又是另一回事,我沒學過書法,漢字的間距不好多說,但英文字母的間距卻不應該隨便調整,尤其不宜統一調整。因為實際上,Type1、TrueType、OpenType 這些字體格式中都包含了一個叫做 kerning table 的東西,也就是字母間距的微調。為什么要做這種微調?兩個簡單的例子是 AV 和 We,如果不做微調,“A”和“V”之間的距離就會過寬,“e”也不會像我們平常書寫的那樣和“W”契合得那么自然,下圖顯示了 Adobe Reader 中,使用 Sabon Next 字體時的 kerning 效果:

大部分的 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 的比較(點擊下圖可放大

出處:jjgod的blog
責任編輯:moby

上一頁 下一頁 Web與排版學上的字體問題 [2]

相關文章 更多相關鏈接
高分辨率下界面布局的解決方案
中文字體設計
hkgood web作品選登
為什么要進行“標準”
用MVC模型引導你的WEB設計思路
熱門搜索:CSS Fireworks 設計比賽 網頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大福“敬•自然”設計大賽開啟
國際體驗設計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數企業唯一擁抱互聯網的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯網觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設計大賽
欄目最新 欄目最新列表
國外創意名片設計欣賞
情感化界面
線下項目工作流程(歸納篇)
線下項目工作流程(分析篇)
簡約而不簡單-Practise平面設計
培養用戶的使用習慣
優秀名片設計
專題頭圖的秘密武器
別讓UED忽悠你(2):多少錢一斤
別讓UED忽悠你(1):天生的矛盾
>> 分頁 首頁 前頁 后頁 尾頁 頁次:1/21個記錄/頁 轉到 頁 共2個記錄 分享按鈕

藍色理想版權申明:除部分特別聲明不要轉載,或者授權我站獨家播發的文章外,大家可以自由轉載我站點的原創文章,但原作者和來自我站的鏈接必須保留(非我站原創的,按照原來自一節,自行鏈接)。文章版權歸我站和作者共有。

轉載要求:轉載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯系,版權歸原作者所有,文章若有侵犯作者版權,請與我們聯系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內容無關的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網上道德,遵守中華人民共和國的各項有關法律法規
·承擔一切因您的行為而直接或間接導致的民事或刑事法律責任
·本站評論管理人員有權保留或刪除其管轄評論中的任意內容
·您在本站發表的作品,本站有權在網站內轉載或引用
·參與本評論即表明您已經閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業書推薦 更多內容
網站可用性測試及優化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網站UI 設計之道
《Flex 4.0 RIA開發寶典》
《贏在設計》
犀利開發—jQuery內核詳解與實踐
作品集 更多內容

雜⑦雜⑧ Gold NORMANA V2
公式规律一波中特