一個(gè)非創(chuàng)意性質(zhì)的網(wǎng)頁，最重要的內(nèi)容，就是文字。出現(xiàn)了文字，就會出現(xiàn)文字排版、字體選擇、字體顏色大小粗細(xì)等細(xì)節(jié)。下面小編為大家整理了網(wǎng)頁設(shè)計(jì)字體基礎(chǔ)篇，希望能幫到大家！

注：以下內(nèi)容只針對英文字體

字體之間最大的差異在于字體與字體之間，形體的差異。但是很多字體（特別是英文字體）之間，差異不大，有些新字體甚至是對已有字體進(jìn)行了細(xì)微的改造后產(chǎn)生的。于是，就把字體分成了五個(gè)系列：襯線字體（serif）、無襯線字體（sans-serif）、等寬字體（fixed-width fonts）、仿手寫字體（cursive fonts）、裝飾用字體（fantasy fonts）。

1、襯線字體

「襯線」指的是是在字的筆畫開始、結(jié)束的地方有額外的裝飾，而且筆畫的粗細(xì)會有所不同,所以「襯線」又被稱為「字腳」。

優(yōu)點(diǎn)：襯線字體容易識別，它強(qiáng)調(diào)了每個(gè)字母筆畫的開始和結(jié)束，因此易讀性比較高，在整文閱讀的情況下，適合使用serif字體進(jìn)行排版，易于換行閱讀的識別性，避免發(fā)生行間的閱讀錯(cuò)誤和產(chǎn)生視覺疲勞。相對于襯線體的機(jī)械冰冷，而襯線字體更為嚴(yán)肅莊重，更具有溫度，古典的美感。所以在書籍、報(bào)紙和雜志中大段落文字的排版，襯線體始終占據(jù)著壓倒性的優(yōu)勢。

2、無襯線字體

無襯線體（sans-serif）專指西文中沒有襯線的字體，與漢字字體中的黑體相對應(yīng)。與襯線字體相反，該類字體通常是機(jī)械的和統(tǒng)一線條的，它們往往擁有相同的曲率，筆直的線條，銳利的轉(zhuǎn)角。

優(yōu)點(diǎn)：因?yàn)闊o襯線的字體結(jié)構(gòu)簡單，在同等字號下，無襯線的字體看上去要比有襯線的更大，結(jié)構(gòu)也更清晰，所以在分辨率較低的電子屏幕，和移動設(shè)備上無襯線體有著很明顯的優(yōu)勢。因?yàn)樘烊坏募夹g(shù)感和理性氣質(zhì)，無襯線字體多為科技型企業(yè)所青睞。

3、等寬字體

等寬字體（monospaced font）是指字符寬度相同的電腦字體。在傳統(tǒng)西文印刷中，比例字體可以提高單詞的可讀性。但因早期的電腦顯示器、打字機(jī)，由于技術(shù)的局限，無法進(jìn)行字母寬度的比例調(diào)整，因此將每個(gè)字元都制作成一樣的寬度，從而形成了等寬字體。

優(yōu)點(diǎn)：精確性高，多用于程序編程。由程序猿的'工作特性：編寫代碼。編寫代碼這種工作具有一個(gè)其他文字工作所不具有的特殊要求：就是編寫出來的代碼要求在每一個(gè)單個(gè)字符的級別上做到100%的精確性。

4、仿手寫字體

仿手寫字體（cursive fonts）顧名思義就是模仿手寫字體。手寫體，比較個(gè)性，通常用于標(biāo)題、logo等等。手寫體是一款優(yōu)點(diǎn)和缺點(diǎn)都比較明顯的字體。

優(yōu)點(diǎn)：特征比較明顯、風(fēng)格多樣化、字體連貫流暢、觀賞性極佳，具有一定的藝術(shù)性。多用于節(jié)日，藝術(shù)性，個(gè)性化企業(yè)等網(wǎng)頁。

缺點(diǎn)：就是字符占位比較大，識別困難。不利于閱讀，字體文件相對比較大，影響網(wǎng)頁加載速度。

5、裝飾用字體

裝飾用字體。多數(shù)用于標(biāo)題，極具個(gè)性。

裝飾用字體極具個(gè)性，字體繁多，藝術(shù)字體無法對其的大小、形狀下一個(gè)統(tǒng)一的定論，所以沒有默認(rèn)字體，實(shí)用性差，在網(wǎng)頁中，也通常很少用到，除非你有特殊的用處創(chuàng)意性的設(shè)計(jì)。

網(wǎng)頁設(shè)計(jì)需要將圖片和文字相結(jié)合，達(dá)到融合的境界，當(dāng)然文字的設(shè)計(jì)也是有一定的規(guī)范的，下面是關(guān)于網(wǎng)頁設(shè)計(jì)字體設(shè)計(jì)規(guī)范，歡迎參考！

1、header導(dǎo)航文字12號或14號;

2、menu導(dǎo)航文字14—18號;

3、sidebar文字12號或14號，

4、一級菜單使用14號、二級菜單使用12號

或一級菜單使用12號加粗、二級菜單使用12號

5、footer 文字12號或14號

8、按鈕文字：比如登錄、注冊頁面按鈕或其他按鈕，文字14—16號，可根據(jù)實(shí)際情況調(diào)整大小或加粗。

在蘋果官網(wǎng)中，產(chǎn)品展示文字以64號和32號搭配，文字內(nèi)容簡短有力，可讀性強(qiáng)，同時(shí)非常具有視覺沖擊力，突出顯示了品牌特征。

1.行寬

2.行高

比如12號字體，行間距是12px—18px，段落間距則是18px—24px。

另外，行高/段落之間的空白=0.754。行間距正好是段落間距的75%是非常常見的。

3.行對齊

通常情況下，建議在頁面上只使用一種文本對齊，盡量避免兩端對齊

4.文字留白

在排版文字時(shí)，在版面需要留出空余空間，留白面積從小到大應(yīng)該遵循的順序是：字間距、行間距、段間距。此外，在排版內(nèi)容區(qū)之前，需要根據(jù)頁面實(shí)際情況給頁面四周留出余白。

5、crap原則(carp)

對比(contrast)、重復(fù)(repetition)、對齊(alignment)、親密性(proximity)

字體：中文：宋體，微軟雅黑，方正系列(無狀態(tài))

字號：網(wǎng)頁中正文/導(dǎo)航字號在12px-18px之間

英文可以偏小一些 10px-16px

再小識別性就不是特別好了

win最常見的.字體，小字體點(diǎn)陣，大字體truetype，但是大字體并不好看，所以最好別做標(biāo)題。

微軟雅黑給人的感受包括平和、干凈、簡單、平靜、專業(yè)

mac下的默認(rèn)中文。

helvetica:

被評為設(shè)計(jì)師最愛的字體，realist風(fēng)格，簡潔現(xiàn)代的線條，非常受到追捧。在mac下面被認(rèn)為是最佳的網(wǎng)頁字體，在windows下由于hinting的原因顯示很糟糕。

arial:

lucida family:

lucida grande是mac os ui的標(biāo)準(zhǔn)字體，屬于humanist風(fēng)格，稍微活潑一點(diǎn)。mac下的顯示要比win下好。

verdana:

專門為了屏顯而設(shè)計(jì)的字體，humanist風(fēng)格，在小字號下仍可以清楚顯示，但是字體細(xì)節(jié)缺失嚴(yán)重，最好別做標(biāo)題。

tahoma:

也是humanist風(fēng)格，字體和verdana有點(diǎn)像，但是略窄一些，counter略小，曾經(jīng)是windows的標(biāo)準(zhǔn)字體，mac 10.5之后默認(rèn)也有安裝。

verdana：

是一套無襯線字體，由于它在小字上仍有結(jié)構(gòu)清晰端整、閱讀辨識容易等高品質(zhì)的表現(xiàn)，因而在1996年推出后即迅速成為許多領(lǐng)域所愛用的標(biāo)準(zhǔn)字型之一。

georgia:

基本上適合正文屏顯的襯線字體，非georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時(shí)細(xì)節(jié)還算ok。

trebuchet、georgia、times new roman、arial、lucida等字體在26px或更大像素時(shí)效果是比較好的，非常適合作為正文的標(biāo)題。

第一類，穩(wěn)定型(協(xié)調(diào)，齊全，穩(wěn)定，高質(zhì))

微軟雅黑、冬青黑體、宋體、華文細(xì)黑、方正正中黑、方正蘭亭系列

第二類，剛硬，銳利，清晰，強(qiáng)烈

(更適用大氣，熱烈，權(quán)威，聲明等主題)

第三類，輕松，手寫，可愛，童趣，親切

(適用于，游戲娛樂活動海報(bào)，h5廣告頁面，兒童/女性主題)

第四類，靈動，清新，秀雅，精致，古韻

(適用于復(fù)古，典雅，傳統(tǒng)，品質(zhì)，靈動等主題)