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

字體的樣式

  常見的字體的樣式分為:正常Normal、粗體Bold、斜體Italic。

  簡單來說,粗體就是字體會更加黑,更加“粗”。斜體就是將字軸微微傾斜。他們都是用於在篇幅內強調某段文字上。

  在說到粗體的時候,我們很容易聯想到CSS裡的font-weight(字重)屬性。我們知道font-weight(字重)屬性值除了我們平常使用的 normal,bold外,還有bolder,lighter,100~900等屬性。那麼這個100~900的值是什麼呢?事實上,100~900並沒 有單位。優秀的字體會對不同的字重提供不同的設計。如果字體事先內置了不同等級的粗細程度的設計,那麼這幾個數值將分別對應每個等級。例如Zurich字 體,就包含了Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、Zurich UltraBlack六個字體。這樣一來,Zurich Light對應的就是100、200、300三個數值,Zurich Regular對應的就是400也就是“正常 normal”,Zurich Medium對應的是500,Zurich Bold也就是“粗體 bold”對應的是600、700,Zurich Black對應800,最後,Zurich UltraBlack對應的是900。

  對於中文斜體,一般在網路上是不使用的。因為中文筆劃繁多,使用了斜體將難以辨認。

  單位

  我們的Web設計中會用到一些單位:

  1、點(pt、point)

  72 points = 1 inch,1英寸是72點。另外,1皮卡(pica)=12 points

  2、圖元(pixel、px)

  圖元就是電腦螢幕上的一個最小的圖像單元,通俗地說就是螢幕上最小的一個點。

  3、DPI、PPI

  DPI 全稱是Dots Per Inch,點每英寸,PPI全稱是Pixel Per Inch。他們是解析度(Resolution)的單位。也就是說,1inch的長度上能安排多少個點(圖元)。舉個例子,一般的,我們的顯示器大概是 72ppi,也就是1英寸的長度上,有72個點(圖元)。dpi/ppi越高,解析度就越高,也就是說,顆粒越小,圖像越細膩。一般來說,照片的解析度在 240dpi~300dpi之間,所以為什麼照片看起來,要比螢幕上看起來要細緻得多。雜誌印刷用133或150dpi,高品質書籍採用350-400dpi,因為大多數印刷精美的書籍印刷時用175到200dpi。所以為什麼同樣物理大小的文字,在書上看,要比在螢幕上看要清晰得多。也就是我們前面提到的,英文書籍印刷,為什麼可以大膽得使用Sans-serif字體。

  dpi和ppi之間實質上沒有差別。實在要找出差別,那麼唯一的差別也許在於dpi常常用於描述掃描器和印表機,而ppi常常描述螢幕的解析度。

  4、ex、x-height

  常在CSS中使用。1ex = 小寫字母x的高度。

  5、em

  常在CSS中使用。當然,em可不是表示小寫字母m的高度(事實上,小寫字母m一般和小寫字母x的高度是一樣的)。1em = 字體的大小的100%。是一個倍數單位。

  間距

  1、行距(Line-height、Leading)

  說到行距(行間距、Line-height、Leading),我們必須先要學習一個術語叫做基線(baseline)。還記得我們剛學英語的時候寫字母用 的那個線格簿子嗎?那根最粗的橫線就是我們說的基線。基線就是大部分字母所“坐”在的,字體的下降部之上的直線。大部分字體,大寫字母總是緊貼基線,並在 基線之上。中文的字體和英文的大寫字母情況一樣。下圖紅色的線就是基線。

  

  那麼,行距就是指兩個相鄰的行之間,基線的距離。行間距的單位常常使用em,也就是根據字體大小來定義行距。在流覽器中,默認的行距並沒有一個準則。更具 W3C提供的建議,它認為默認的行距應該在1.0em到1.2em之間。事實上,在設定行距的時候,排版上有個原則,就是行與行之間的空隙一定要大於單詞與單詞之間的空隙, 否則的話,閱讀者在閱讀的時候容易“串列”,造成閱讀困難。充足的行距可以隔開每行文字,使得眼睛容易區分上一行或下一行。近幾年Web上對於正文的排 版,大多喜歡1.5em的行距,尤其是中文網站。也就是如果使用了12px的字體大小,那麼設計師常常喜歡18px的行距。1.5em確實是一個很好的經 驗值。事實上,中文的論文的規範也是使用1.5em的行距。

  2、字間距(Letter-spacing、Tracking)

  字間距是指一組字母之間相互間隔的距離。字間距影響了一行或者一個段落的文字的密度。

  3、字距調整(Kerning)

  字距調整是一種因視覺需要而做的技術處理。簡單說,在兩個特定的字元連排的時候,你可以為它們單獨指定與眾不同的字間距。比如當一個大寫A後面跟隨一個小寫 v的時候,兩個字元間就會出現視覺上的更大的間距(實際上字間距是一樣的),這是普通的字元間距所無法解決的。如果減少它們的間距,那麼其他的字母就會連 成一團。這時候就需要字距調整來處理了。下圖就是一個應用了字距調整的例子:

  

 

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

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

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

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