網(wǎng)站設(shè)計(jì)之字體在頁(yè)面排版上的完全攻略

我們每天設(shè)計(jì)都在與字體打交道。但是我們一直沒(méi)有認(rèn)真在意他們的存在。我們沒(méi)有很好地使用過(guò)他們，甚至濫用他們。這一切是因?yàn)槲覀儾涣私馑麄?。字體作為排版的重要元素之一;在設(shè)計(jì)里也是最深?yuàn)W的一門學(xué)問(wèn)之一。本文中，就與大家來(lái)一起探討一下這門深?yuàn)W的學(xué)問(wèn)。

字體的類型

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

一、襯線體(Serif)

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

襯線設(shè)計(jì)的初衷是為了更清楚地標(biāo)明筆觸的末端，提高辨識(shí)率，提高閱讀速度。另外，使用襯線字體會(huì)讓人感覺(jué)更加的正統(tǒng)。所以我們常見的英文書籍，特別是論文、小說(shuō)，很多都是使用襯線體來(lái)完成正文的。

網(wǎng)頁(yè)設(shè)計(jì)中常用的襯線體有Times New Roman和Georgia。下圖左邊是12px的Times New Roman字體，右邊是12px的Georgia。

在中文里，我們使用的宋體就是對(duì)應(yīng)的襯線字體。

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

字體如果不帶襯線的話，那么就稱為非襯線體或者無(wú)襯線體。下圖就是非襯線體。

網(wǎng)頁(yè)設(shè)計(jì)中常用的非襯線體相對(duì)就比較多了。有Arial、Verdana、Tahoma、Helivetica、Calibri等。下圖從左到右依次是Arial、Verdana、Tahoma:


值得注意的是，雖然在書籍中，襯線字體被廣泛地應(yīng)用，但是在互聯(lián)網(wǎng)上，襯線字體很少被使用。由于電腦屏幕分辨率與書籍不具可比性，所以正文10～12px的 襯線字體在電腦屏幕上是很難辨認(rèn)的。下圖是沒(méi)有Cleartype時(shí)，10px的Verdana和10px的Times New Roman的對(duì)比。大家可以發(fā)現(xiàn)，左側(cè)的Verdana可以被很好的辨識(shí)。右側(cè)的Times New Roman辨認(rèn)相當(dāng)困難。

三、等寬字體(Monospace)

等寬字體事實(shí)上只針對(duì)西文字體。因?yàn)橛⑽淖帜傅膶挾雀鞑幌嗤?。例如i就要比m窄很多。編程時(shí)顯示代碼，如果字母不等寬那么排版將很難看。我們?cè)贒OS命令行中，可以看到使用的是等寬字體。

編程要求的等寬字體有如下要求：

1、所有字符等寬;

2、簡(jiǎn)潔、清晰、規(guī)范的字符形體;

3、支持ASCII碼為128以上的擴(kuò)展字符集;

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

5、“1”、“l(fā)”和“i”等三個(gè)字符易于區(qū)分;

6、“0”、“o”和“O”等三個(gè)字符易于區(qū)分;

7、雙引號(hào)、單引號(hào)的前后部分易于區(qū)分，最好是鏡像對(duì)稱的;

8、清晰的標(biāo)點(diǎn)符號(hào)外形，尤其是大括符、圓括符和方括符。

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

四、手寫體(Calligraphy)

顧名思義，手寫體就是手寫風(fēng)格的字體。有時(shí)我們也叫它書法字體。中文的書法字體大多都比較生硬。個(gè)人更推薦使用日文的書法字體。日文書法字體跟加柔美，更人性。但時(shí)使用日文書法字體缺點(diǎn)就是大都都是繁體，另外很多漢字會(huì)缺少。

五、符號(hào)體(Symbol)

Windows里最著名的符號(hào)體就是Webdings(記得以前還在Windows 95的時(shí)候蠻愛用的……)。下面是Webdings字體的幾個(gè)：字體的樣式

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

簡(jiǎn)單來(lái)說(shuō)，粗體就是字體會(huì)更加黑，更加“粗”。斜體就是將字軸微微傾斜。他們都是用于在篇幅內(nèi)強(qiáng)調(diào)某段文字上。

在說(shuō)到粗體的時(shí)候，我們很容易聯(lián)想到CSS里的font-weight(字重)屬性。我們知道font-weight(字重)屬性值除了我們平常使用的 normal，bold外，還有bolder,lighter,100~900等屬性。那么這個(gè)100～900的值是什么呢?事實(shí)上，100～900并沒(méi) 有單位。優(yōu)秀的字體會(huì)對(duì)不同的字重提供不同的設(shè)計(jì)。如果字體事先內(nèi)置了不同等級(jí)的粗細(xì)程度的設(shè)計(jì)，那么這幾個(gè)數(shù)值將分別對(duì)應(yīng)每個(gè)等級(jí)。例如Zurich字 體，就包含了Zurich Light、Zurich Regular、Zurich Medium、Zurich Bold、Zurich Black、Zurich UltraBlack六個(gè)字體。這樣一來(lái)，Zurich Light對(duì)應(yīng)的就是100、200、300三個(gè)數(shù)值，Zurich Regular對(duì)應(yīng)的就是400也就是“正常 normal”，Zurich Medium對(duì)應(yīng)的是500，Zurich Bold也就是“粗體 bold”對(duì)應(yīng)的是600、700，Zurich Black對(duì)應(yīng)800，最后，Zurich UltraBlack對(duì)應(yīng)的是900。

對(duì)于中文斜體，一般在網(wǎng)絡(luò)上是不使用的。因?yàn)橹形墓P畫繁多，使用了斜體將難以辨認(rèn)。

單位

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

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

4、ex、x-height

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

5、em

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

間距

1、行距(Line-height、Leading)

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


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

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

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

3、字距調(diào)整(Kerning)

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

段落

1、行長(zhǎng)(Measure)

行長(zhǎng)是指一段文字的寬度。如下圖：


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

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

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

2、對(duì)齊(Alignment)

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

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

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

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

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

3、易讀性

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

一份設(shè)計(jì)上至多使用三種字體的大小。

一份設(shè)計(jì)上至多使用三種字體。

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

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

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

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

本文由成都網(wǎng)站設(shè)計(jì)公司創(chuàng)新互聯(lián)發(fā)布，轉(zhuǎn)載請(qǐng)注意文章出處！

本文名稱：網(wǎng)站設(shè)計(jì)之字體在頁(yè)面排版上的完全攻略
當(dāng)前路徑：http://muchs.cn/news43/14743.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)