單位

　　我們的Web設計中會(huì )用到一些單位：

　　1、點(diǎn)(pt、point)

　　72 points = 1 inch，1英寸是72點(diǎn)。另外，1皮卡(pica)=12 points

　　2、像素(pixel、px)

　　像素就是電腦屏幕上的一個(gè)最小的圖像單元，通俗地說(shuō)就是屏幕上最小的一個(gè)點(diǎn)。

　　3、DPI、PPI

　　DPI 全稱(chēng)是Dots Per Inch，點(diǎn)每英寸，PPI全稱(chēng)是Pixel Per Inch。他們是解析度(Resolution)的單位。也就是說(shuō)，1inch的長(cháng)度上能安排多少個(gè)點(diǎn)(像素)。舉個(gè)例子，一般的，我們的顯示器大概是 72ppi，也就是1英寸的長(cháng)度上，有72個(gè)點(diǎn)(像素)。dpi/ppi越高，解析度就越高，也就是說(shuō)，顆粒越小，圖像越細膩。一般來(lái)說(shuō)，照片的解析度在 240dpi～300dpi之間，所以為什么照片看起來(lái)，要比屏幕上看起來(lái)要細致得多。雜志印刷用133或150dpi，高品質(zhì)書(shū)籍采用350-400dpi，因為大多數印刷精美的書(shū)籍印刷時(shí)用175到200dpi。所以為什么同樣物理大小的文字，在書(shū)上看，要比在屏幕上看要清晰得多。也就是我們前面提到的，英文書(shū)籍印刷，為什么可以大膽得使用Sans-serif字體。

　　dpi和ppi之間實(shí)質(zhì)上沒(méi)有差別。實(shí)在要找出差別，那么唯一的差別也許在于dpi常常用于描述掃描儀和打印機，而ppi常常描述屏幕的分辨率。

　　4、ex、x-height

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

　　5、em

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

　　間距

　　1、行距(Line-height、Leading)

　　說(shuō)到行距(行間距、Line-height、Leading)，我們必須先要學(xué)習一個(gè)術(shù)語(yǔ)叫做基線(xiàn)(baseline)。還記得我們剛學(xué)英語(yǔ)的時(shí)候寫(xiě)字母用 的那個(gè)線(xiàn)格簿子嗎?那根最粗的橫線(xiàn)就是我們說(shuō)的基線(xiàn)?；€(xiàn)就是大部分字母所“坐”在的，字體的下降部之上的直線(xiàn)。大部分字體，大寫(xiě)字母總是緊貼基線(xiàn)，并在基線(xiàn)之上。中文的字體和英文的大寫(xiě)字母情況一樣。下圖紅色的線(xiàn)就是基線(xiàn)。

　　那么，行距就是指兩個(gè)相鄰的行之間，基線(xiàn)的距離。行間距的單位常常使用em，也就是根據字體大小來(lái)定義行距。在瀏覽器中，默認的行距并沒(méi)有一個(gè)準則。更具 W3C提供的建議，它認為默認的行距應該在1.0em到1.2em之間。事實(shí)上，在設定行距的時(shí)候，排版上有個(gè)原則，就是行與行之間的空隙一定要大于單詞與單詞之間的空隙，否則的話(huà)，閱讀者在閱讀的時(shí)候容易“串行”，造成閱讀困難。充足的行距可以隔開(kāi)每行文字，使得眼睛容易區分上一行或下一行。近幾年Web上對于正文的排 版，大多喜歡1.5em的行距，尤其是中文網(wǎng)站。也就是如果使用了12px的字體大小，那么設計師常常喜歡18px的行距。1.5em確實(shí)是一個(gè)很好的經(jīng) 驗值。事實(shí)上，中文的論文的規范也是使用1.5em的行距。

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

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

　　3、字距調整(Kerning)

　　字距調整是一種因視覺(jué)需要而做的技術(shù)處理。簡(jiǎn)單說(shuō)，在兩個(gè)特定的字符連排的時(shí)候，你可以為它們單獨指定與眾不同的字間距。比如當一個(gè)大寫(xiě)A后面跟隨一個(gè)小寫(xiě) v的時(shí)候，兩個(gè)字符間就會(huì )出現視覺(jué)上的更大的間距(實(shí)際上字間距是一樣的)，這是普通的字符間距所無(wú)法解決的。如果減少它們的間距，那么其他的字母就會(huì )連成一團。這時(shí)候就需要字距調整來(lái)處理了。下圖就是一個(gè)應用了字距調整的例子：

　　段落

　　1、行長(cháng)(Measure)

　　行長(cháng)是指一段文字的寬度。　　

　　有兩個(gè)易讀性問(wèn)題與行長(cháng)有關(guān)：

　　行長(cháng)越長(cháng)，需要的越大的行距。行距太小，讀者閱讀換行時(shí)容易串行。行距太大，讀者閱讀行時(shí)會(huì )感覺(jué)到文字不連續。

　　正文中，每行40~70個(gè)字母為宜。

　　2、對齊(Alignment)

　　段落的對齊基本有四種：左對齊(flush left)、右對齊(flush right)、居中對齊(centered)和兩端對齊(justified)。

　　左對齊是指設置文本內容，調整文字的水平間距，使段落或者文章中的文字沿水平方向向左對齊的一種對齊方式。左對齊使文章左側文字具有整齊的邊緣。同時(shí)文字的右邊就會(huì )不整齊。所以英文對左對齊也叫做ragged right，意指外形參差不齊的右邊。右對齊也類(lèi)同。

　　居中對齊是指設置文本內容，調整文字的水平間距，使段落或者文章中的文字沿水平方向向中間集中對齊的一種對齊方式。居中對齊使文章兩側文字整齊地向中間集中，使整個(gè)段落或整篇文章都整齊的

　　兩端對齊是指設置文本內容兩端，調整文字/單詞的水平間距，使其均勻分布在左右頁(yè)邊距之間。兩端對齊使兩側文字具有整齊的邊緣。

　　使用兩端對齊之后，兩側的對齊線(xiàn)會(huì )很明晰，文本塊的“快”的感覺(jué)也會(huì )很明顯。但是，在英文排版中，當行長(cháng)很短的時(shí)候，使用兩端對齊可能會(huì )照成某些行詞間距過(guò)長(cháng)，某些行詞間距過(guò)短，這樣參差不齊的詞間距會(huì )感覺(jué)十分凌亂，就像一件到處都是補丁的衣服。

　　3、易讀性

　　易讀性描述的是排印文本閱讀時(shí)的輕松和舒適程度。實(shí)際上，平常的設計的最根本的目的也在于此。除上文中敘述的一些原則外，我另外收羅了一些小小的易讀性原則，與大家分享：

　　一份設計上至多使用三種字體的大小。

　　一份設計上至多使用三種字體。

　　要保證一定的對比度，但又不可有過(guò)度的對比。陽(yáng)文(白底黑字)比陰文(黑底白字)要更容易閱讀。在#fff的背景上，使用#333的文字要比#000的文字看起來(lái)舒服。

　　要注意文字所在的背景。背景要單一。避免背景噪聲。

　　“少即是多” 用最少的元素去傳達最多的信息。

　　讓你的鏈接看起來(lái)像是一個(gè)鏈接。

　　利用好你的空間。