振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
網頁設計之字體在頁面排版上的完全攻略(上)
2010/04/07
網頁設計之字體在頁面排版上的完全攻略(上)

 我們每天設計都在與字體打交道。但是我們一直沒有認真在意他們的存在。我們沒有很好地使用過他們,甚至濫用他們。這一切是因為我們不瞭解他們。字體作為排版的重要元素之一;在設計裡也是最深奧的一門學問之一。本文中,就與大家來一起探討一下這門深奧的學問。

  字體的類型

  英文字體(Typeface),分為幾種大類,這是在使用英文字體的時候必須知道的基本知識:

  一、襯線體(Serif)

  襯線(serif)就是筆劃邊緣的裝飾部分。下圖中紅色標注的地方就是襯線。

  

  襯線設計的初衷是為了更清楚地標明筆觸的末端,提高辨識率,提高閱讀速度。另外,使用襯線字體會讓人感覺更加的正統。所以我們常見的英文書籍,特別是論文、小說,很多都是使用襯線體來完成正文的。

  網頁設計中常用的襯線體有Times New Roman和Georgia。下圖左邊是12px的Times New Roman字體,右邊是12px的Georgia。

  

  在中文裡,我們使用的宋體就是對應的襯線字體。

  二、非襯線體/無襯線體(Sans-serif)

  字體如果不帶襯線的話,那麼就稱為非襯線體或者無襯線體。下圖就是非襯線體。

  

  網頁設計中常用的非襯線體相對就比較多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下圖從左到右依次是Arial、Verdana、Tahoma:

  

  值得注意的是,雖然在書籍中,襯線字體被廣泛地應用,但是在互聯網上,襯線字體很少被使用。由於電腦螢幕解析度與書籍不具可比性,所以正文10~12px的 襯線字體在電腦螢幕上是很難辨認的。下圖是沒有Cleartype時,10px的Verdana和10px的Times New Roman的對比。大家可以發現,左側的Verdana可以被很好的辨識。右側的Times New Roman辨認相當困難。

  

  三、等寬字體(Monospace)

  等寬字體事實上只針對西文字體。因為英文字母的寬度各不相同。例如i就要比m窄很多。程式設計時顯示代碼,如果字母不等寬那麼排版將很難看。我們在DOS命令列中,可以看到使用的是等寬字體。

  程式設計要求的等寬字體有如下要求:

  1、所有字元等寬;

  2、簡潔、清晰、規範的字元形體;

  3、支持ASCII碼為128以上的擴充字元集;

  4、空白字元(ASCII: 0×20)與其他字元等寬;

  5、“1”、“l”和“i”等三個字元易於區分;

  6、“0”、“o”和“O”等三個字元易於區分;

  7、雙引號、單引號的前後部分易於區分,最好是鏡像對稱的;

  8、清晰的標點符號外形,尤其是大括符、圓括符和方括符。

  常見的等寬字體有Courier,Courier New

  四、手寫體(Calligraphy)

  顧名思義,手寫體就是手寫風格的字體。有時我們也叫它書法字體。中文的書法字體大多都比較生硬。個人更推薦使用日文的書法字體。日文書法字體跟加柔美,更人性。但時使用日文書法字體缺點就是大都都是繁體,另外很多漢字會缺少。

  五、符號體(Symbol)

  Windows裡最著名的符號體就是Webdings(記得以前還在Windows 95的時候蠻愛用的……)。下面是Webdings字體的幾個:

  

 

最後更新 ( 2010/04/07 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇